Div Rozwiń, aby wizualnie wypełnić pionową spację

Mam stronę z nagłówkiem, zawartością i stopką. Nagłówek i stopka mają stałą wysokość i chciałbym, aby zawartość dopasowywała jej wysokość tak, aby pasowała dynamicznie między nagłówkiem i stopką. Planuję umieścić w mojej treści obraz tła, dlatego ważne jest, aby wypełniał on resztę niezajętej przestrzeni pionowej.Div Rozwiń, aby wizualnie wypełnić pionową spację

Użyłem podejścia Sticky Footer, aby upewnić się, że stopka pozostaje na dole strony. Nie powoduje to jednak, że zawartość obejmuje całą wysokość pozostałej przestrzeni.

Próbowałem różnych rozwiązań, które wymagały dodania height:100%, height:auto; position:relative, ale to nie zadziałało.

html, 
 
body { 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: blue; 
 
} 
 
header nav ul li { 
 
    display: inline; 
 
    padding: 0 30px 0 0; 
 
    float: left; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 0 -30px 0; 
 
    /* the bottom margin is the negative value of the footer's height */ 
 
    position: relative; 
 
} 
 
#wrapper #content { 
 
    background-color: pink; 
 
    width: 400px; 
 
    height: 100%; 
 
    margin: 0 0 -30px 100px; 
 
    padding: 25px 30px 25px 30px; 
 
} 
 
footer { 
 
    margin: -30px 0 0 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 

 
    <header> 
 
    <div id="logo"></div> 
 

 
    <nav> 
 
     <ul> 
 
     <li>About</li> 
 
     <li>Menu</li> 
 
     <li>Specials</li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 

 
    <div id="content"> 
 
    content 
 
    <br>goes 
 
    <br>here 
 
    </div> 
 

 
</div> 
 

 
<footer>footer</footer>

Źródło

2012-05-05 Jon

Jest to prawdopodobnie duplikat [Jak zrobić div poszerzyć dopasować dostępną przestrzeń w pionie?] (Http://stackoverflow.com/questions/2351674/how-to-make-a-div-expand -to-fit-available-vertical-space) – ccpizza

Może działać, jeśli ustawisz 'height: 100%' dla znaczników 'html' i' body'. – ccpizza

Spróbuj zmienić css do tego:

html, 
 
body { 
 
    height: 100%; 
 
    background-color: yellow; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: blue; 
 
} 
 
header nav ul li { 
 
    display: inline; 
 
    padding: 0 30px 0 0; 
 
    float: left; 
 
} 
 
#wrapper { 
 
    min-height: 100%; 
 
    height: auto !important; 
 
    height: 100%; 
 
    margin: 0 0 -30px 0; 
 
    /* the bottom margin is the negative value of the footer's height */ 
 
    position: relative; 
 
} 
 
#content { 
 
    background-color: pink; 
 
    width: 400px; 
 
    padding: 25px 30px 25px 30px; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    top: 150px; 
 
    margin-left: 100px; 
 
} 
 
footer { 
 
    margin: -30px 0 0 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: green; 
 
}

<div id="wrapper"> 
 

 
    <header> 
 
    <div id="logo"></div> 
 

 
    <nav> 
 
     <ul> 
 
     <li>About</li> 
 
     <li>Menu</li> 
 
     <li>Specials</li> 
 
     </ul> 
 
    </nav> 
 
    </header> 
 

 
    <div id="content"> 
 
    content 
 
    <br>goes 
 
    <br>here 
 
    </div> 
 

 
</div> 
 

 
<footer>footer</footer>

Prawdopodobnie nie chcą być ustawienie szerokości, wyściółka, marginesy, ect. opakowania. Ponadto, przy absolutnym pozycjonowaniu możesz przeciągnąć dolną i górną część zawartości tam, gdzie chcesz.

Oto what you are after, myślę.

Źródło

2012-05-05 19:00:00

Dziękuję Gabriel :) Dokładnie tego szukam. – Jon

@ user1277607 jeśli #content jest wartością bezwzględną, wówczas opakowanie nie będzie rosło, aby pomieścić zawartość [skrzypce] (http://jsfiddle.net/mowglisanu/qC8z5/1/) – Musa

To NIE DZIAŁA, jeśli zawartość przewija się. – sproketboy

-5

Nie ma wysokość 100% z 100% wysokości continer dokładnie. Nie możesz tego rozwiązać w ten sposób. Podobnie podczas korzystania z mieszanki wysokości + margines + dopełnienie. To jest droga prosto do piekła. Proponuję zapoznać się z samouczkami, które zawierają ten układ strony.

Źródło

2012-05-05 18:29:36

Powiedzenie komuś, że nie jest możliwe i "Google to" nie jest dobrą odpowiedzią. – Harmon

Sztuczka o wysokości: 100% polega na tym, że wymaga ona, aby wszystkie kontenery rodzicielskie miały również ustawione ich wysokości. Oto przykład html

<html> 
    <body> 
    <div id="container"> 
    </div> 
    </body> 
</html>

Aby div kontenera o wysokości ustawionej na 100% ekspansji dynamicznie do wysokości okna trzeba upewnić się, że elementy nadwozia i HTML mają ich wysokość ustawiona na 100 % także. tak ...

html 
{ 
    height: 100%; 
} 
body 
{ 
    height: 100%; 
} 
#container 
{ 
    height: 100%; 
}

dałby ci pojemnik, który rozszerza się, aby pasowały do okna. jeśli chcesz mieć stopkę lub nagłówek, który unosi się nad tym oknem, możesz to zrobić za pomocą indeksowania z. To jedyne rozwiązanie, które znalazłem dynamicznie wypełniając wysokość pionową.

Źródło

2014-03-23 17:18:40

Tak, ale powoduje to problem. Pojemnik na poziomie strony zostanie rozwinięty poniżej ekranu i będziesz musiał przewinąć nieco w pionie. Możesz ustawić wysokość pojemnika na <100%. Ale czy jest inny sposób? – HelloWorldNoMore

"Sztuczka o wysokości: 100% polega na tym, że wymaga ona, aby wszystkie kontenery nadrzędne miały również ustawione ich wysokości" dla mnie została wykonana – PALEN

Spędzam kilka godzin próbując to zrozumieć i wreszcie mam solidne rozwiązanie bez hacków. Wymaga to jednak CSS3, który wymaga obsługi nowoczesnej przeglądarki. Tak więc, jeśli to ograniczenie działa dla ciebie, to mam dla ciebie prawdziwe rozwiązanie, które działa.

http://jsfiddle.net/u9xh4z74/ Skopiuj ten kod do własnego pliku, jeśli potrzebujesz dowodu, ponieważ JSFiddle nie będzie właściwie renderował flexbox jako kodu osadzonego.

Zasadniczo trzeba - ustawić pojemnik docelową do 100% wysokości, które wydają się już wiemy - nadrzędnego kontenera ustawionego wyświetlacza: wyginać i flex-kierunek pionowy (zobaczysz w JSFiddle Dodałem również alternatywne style, które robią to samo, ale są potrzebne do obsługi wielu przeglądarek). - możesz pozwolić, aby nagłówek i stopka były ich naturalnymi wysokościami i nie musisz niczego określać pod tym względem. - w pojemniku, który chcesz aby wypełnić pozostałą przestrzeń, ustaw flex: 1. Jesteś ustawiony! Zobaczysz, że działa dokładnie tak, jak zamierzałeś semantycznie. Również w JSFiddle uwzględniłem przepełnienie: auto, aby zademonstrować, że jeśli masz jeszcze więcej tekstu niż może obsłużyć ekran, przewijanie działa tak, jak byś tego chciał.

<div style="display:flex; flex-direction:vertical;"> 
    ...header(s)... 
    <div style="flex: 1; overflow: auto;"> 
     As much content as you want. 
    </div> 
    ...footer(s)... 
</div>

Na marginesie zdecydowałem się spróbować zrobić to samo za pomocą wyświetlacza: tabeli. Działa to również dobrze, z tym wyjątkiem, że przepełniona zawartość nie działa tak, jak można by się spodziewać, zamiast przepełnionej treści po prostu rozszerza kontener do rozmiaru treści, co do którego jestem pewien, że nie jest to, czego chcesz. Cieszyć się!

Źródło

2015-02-20 07:49:33

"pionowa" powinna być "kolumna", to działa –

Dostarczam nieco bardziej ogólne rozwiązanie, więc jest bardziej przydatne dla innych czytających tę odpowiedź i zastanawiających się, jak zastosować ją na swojej stronie.

Zakładając, masz trzy div:

<div id='header'></div> 
<div id='contents'></div> 
<div id='footer'></div>

gdzie #header jest stała i może mieć zmienną wysokość, #contents powinny spożywać całą pozostałą przestrzeń w pionie i #footer jest stała i może mieć zmienną wysokość można zrobić:

/* Note you could add a container div instead of using the body */ 
body { 
    display: flex; 
    flex-direction: column; 
} 
#header { 
    flex: none; 
} 
#contents { 
    flex: 1; 
    height: 100%; 
    overflow-y: scroll; 
} 
#footer { 
    flex: none; 
}

Należy pamiętać, że pozwoli to zawartości przewijać się w pionie, aby pokazać całą zawartość.

Możesz przeczytać więcej o wyświetlaczu: flex here.

Źródło

2015-03-19 23:50:50 owencm

to nie działa kiedy dodasz klasę do kontenera div –

Czy możesz rozwinąć?Nie jestem do końca pewien, co masz na myśli - to działa dobrze dla mnie. – owencm

jquery css zostało nadpisane XD –

Użyj wyświetlacza: tabela i wyświetlacz: wiersz tabeli Ustaw wysokość: 0 dla normalnych elementów div i height: auto dla div, które powinno wypełniać pionową spację. Wstaw div z {height: 100%; overflow-y: auto} do pionowego wypełniacza, jeśli wysokość kontenera nie powinna przekraczać jego zadanej wysokości. Oto moc wyświetlacza: stół!

<div style="height:300px;"> 
    <div style="display:table; height:100%; width:100%;border: 1px solid blue;"> 
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;"> 
     Hello   
    </div> 
    <div style="display: table-row; height:auto; padding:2px; background-color:green;"> 
     <div style="height:100%; overflow: auto;"> 
     <div style="height: 500px"></div> 
     </div> 
    </div> 
    <div style="display: table-row; height:0; padding:2px; background-color:yellow;"> 
     Gbai 
    </div> 
    </div> 
</div>

Źródło

2016-05-26 13:44:58 clearfix

Div Rozwiń, aby wizualnie wypełnić pionową spację

Odpowiedz

Powiązane problemy