pełny ekran div, który pasuje do rozmiaru przeglądarki

<html> 
<head> 
    <title></title> 
    <style text="text/javascript"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</body> 
</html>

Menu jest stała, behindMenu ma taki sam rozmiar jak menu i to za menu. Potem mam logo i div z klasą pełną. Po pełnym jest div z treścią klasy.

Podczas odwiedzania tej strony chcę, aby div był (rozmiar) między logo i dolnej części rozmiaru przeglądarki. Tak więc pełne musi mieć wysokość między logo a dolnym rozmiarem przeglądarki, nawet jeśli zmieniam rozmiar okna. Kiedy przewiniesz w dół, użytkownik zobaczy Resztę treści.

coś takiego: http://strobedigital.com/

Oto skrzypce: http://jsfiddle.net/2963C/

Źródło

2013-08-07 repincln

HTML

<html> 
<head> 
    <title></title> 
    <style text="text/css"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</div> 
</body> 
</html>

CSS

html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

Źródło

2013-08-07 07:33:34 Anon

Dzięki. To działa dobrze z jedną modyfikacją. menu, za Menu i logo musi być pod pełnym div. Dziękuję Ci bardzo. – repincln

Nie działa, jeśli zawartość poniżej .full jest wyższa niż .full Musisz użyć position: fixed; – Macbric

.full { min-height: 100%; height:auto;}

Źródło

2013-08-07 06:52:16 ParVathi

To nie działa ... – repincln

<html> 
<head> 
    <style text="text/javascript"> 
    html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; left:0; width:100%; min-height:100%;} 
.menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
.behindMenu { height: 50px; width: 100%; } 
.logo {width: 100%; height: 150px;} 
.content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
</div> 
    <div class="content">The rest content</div> 
</body> 
</html>

Oto skrzypce z Roztwór podstawowy http://jsfiddle.net/agrawal_rupesh/b7gwK/

Źródło

2013-08-07 08:08:48 Rupesh

To rozwiązanie nie jest dobre, ponieważ zawartość nie jest po pełnym div. To jest za tym divem. – repincln

Istnieje proste rozwiązanie obsługiwane przez wszystkich nowoczesnych przeglądarkach.

Jedynym godnym uwagi wyjątkiem jest Android poniżej 4.3 - ale tylko w przeglądarce systemowej (Chrome działa poprawnie).

Przeglądarka wykres wsparcia: http://caniuse.com/viewport-units

Źródło

2014-05-22 11:09:53

Wow! Lepsze niż zaakceptowana odpowiedź! Prosty, ale wykonujący pracę! Dziękuję Ci! –

Awesome, po prostu wypróbowałem to –

** 100vh ** nie działa na Androidzie 4.3 i poniżej ze względu na starą implementację webview – EpicPandaForce

Niestety vh i vw jest bardzo buggy z iPhone, ale prawie wszystkie przeglądarki (idąc droga powrotna) jest zadowolony jakiejś matematyki dla Ciebie:

html,body { 
    height:100%; 
    margin:0; 
} 

.full { 
    height: calc(100% - 50px); /* Minus menu height */ 
    min-height: calc(100% - 50px);/*for Mozilla */ 
} 

html>body .full { 
    height:auto; 
}

Źródło

pełny ekran div, który pasuje do rozmiaru przeglądarki

Odpowiedz

Powiązane problemy