Mam element div z ID = "kontener". Chcę ustawić ten element jako rozmiar widocznego obszaru w oknie przeglądarki. W tym celu używam następującego JS.
var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;
Jednak rozmiar okna przeglądarki jest większy niżpojawią się paski rozmiaru widocznego i poziomego i pionowego. Jak to zrobić, aby moja strona HTML pasowała do okna przeglądarki bez potrzeby używania pasków przewijania?
EDYTOWAĆ:
Zasadniczo pytam, jak sprawić, by rozmiar dokumentu był taki sam jak rozmiar rzutni?
Odpowiedzi:
20 dla odpowiedzi nr 1To powinno działać.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: green;
}
#container {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
background-color: pink;
}
h1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
</div>
</body>
</html>
Kolory tła są dostępne, dzięki czemu można zobaczyć, jak to działa. Skopiuj ten kod do pliku i otwórz go w przeglądarce. Spróbuj trochę zagrać w CSS i zobacz, co się stanie.
The width: inherit; height: inherit; pobiera szerokość i wysokość z elementu nadrzędnego. To powinien domyślnie i nie jest to naprawdę konieczne.
Spróbuj usunąć h1 { ... } Blok CSS i zobacz, co się stanie. Możesz zauważyć, że układ reaguje w dziwny sposób. To dlatego, że h1 element wpływa na układ kontenera. Można temu zapobiec, deklarując overflow: hidden; na pojemniku lub ciele.
Sugeruję również, abyś przeczytał Model skrzynkowy CSS.
1 dla odpowiedzi nr 2
Możesz użyć width: 100%; w twoim css.
1 dla odpowiedzi nr 3
<html>
<head >
<title>Welcome</title>
<style type="text/css">
#maincontainer
{
top:0px;
padding-top:0;
margin:auto; position:relative;
width:950px;
height:100%;
}
</style>
</head>
<body>
<div id="maincontainer ">
</div>
</body>
</html>