Odpowiedzi:
Sztuczka polega na określeniu 100% wysokości w elementach html i body. Niektóre przeglądarki wykorzystują elementy nadrzędne (html, body), aby obliczyć wysokość.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
zapomnij o wszystkich odpowiedziach, ta linia CSS zadziałała dla mnie w 2 sekundy:
height:100vh;
1vh
= 1% wysokości ekranu przeglądarki
Aby uzyskać elastyczne skalowanie układu, możesz użyć:
min-height: 100vh
[aktualizacja z listopada 2018 r.] Jak wspomniano w komentarzach, użycie minimalnej wysokości może uniknąć problemów z projektami odpowiadającymi
[aktualizacja z kwietnia 2018 r.] Jak wspomniano w komentarzach, w 2011 roku, kiedy zadawano pytanie, nie wszystkie przeglądarki obsługiwały jednostki widoku. Inne odpowiedzi były rozwiązaniami z tamtych czasów - vmax
nadal nie jest obsługiwane w IE, więc może to nie być jeszcze najlepsze rozwiązanie dla wszystkich.
min-height: 100vh
byłoby znacznie lepiej. Skaluje się również do responsywnych projektów.
Właściwie najlepsze podejście jest takie:
html {
height:100%;
}
body {
min-height:100%;
}
To rozwiązuje wszystko dla mnie i pomaga mi kontrolować moją stopkę i może mieć stałą stopkę bez względu na to, czy strona jest przewijana w dół.
Rozwiązanie techniczne - EDYTOWANE
Historycznie rzecz biorąc, „wysokość” jest trudna do uformowania, w porównaniu do „szerokości” jest najłatwiejsza. Ponieważ css skupia się <body>
na stylizacji do pracy. Kod powyżej - podaliśmy <html>
i <body>
wysokość. W tym miejscu pojawia się magia - ponieważ na stole do gry mamy „minimalną wysokość”, mówimy przeglądarce, która <body>
jest lepsza, <html>
ponieważ <body>
przechowuje minimalną wysokość. To z kolei pozwala <body>
na nadpisanie, <html>
ponieważ <html>
wysokość miałam już wcześniej. Innymi słowy, oszukujemy przeglądarkę, aby „odbijała” <html>
się od stołu, abyśmy mogli stylizować niezależnie.
min-height
i height
?
<body>
na stylizacji do pracy. Ten kod: daliśmy <html>
i <body>
wysokość. W tym miejscu pojawia się magia - ponieważ na stole do gry mamy „minimalną wysokość”, mówimy serwerowi, który <body>
jest lepszy od tego, <html>
że <body>
ma minimalną wysokość. To z kolei pozwala <body>
na nadpisanie, <html>
ponieważ <html>
wysokość miałam już wcześniej. Innymi słowy, oszukujemy serwer, aby „wyskakiwał” <html>
ze stołu, abyśmy mogli stylizować niezależnie.
Możesz użyć vh na właściwości min-height.
min-height: 100vh;
W zależności od tego, jak używasz marginesów, możesz wykonać następujące czynności ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element
Przyjęte rozwiązanie w rzeczywistości nie zadziała. Można zauważyć, że zawartość div
będzie równa wysokości jego rodzica body
. Zatem ustawienie body
wysokości na 100%
spowoduje ustawienie jej równej wysokości okna przeglądarki. Powiedzmy, że okno przeglądarki miało 768px
wysokość, ustawiając div
wysokość zawartości na 100%
, div
wysokość z kolei będzie wynosić 768px
. W ten sposób zostanie utworzony element div nagłówka, 150px
a element div zawartości 768px
. W końcu zawartość będzie 150px
znajdować się poniżej dolnej części strony. Aby uzyskać inne rozwiązanie, sprawdź ten link.
Dzięki HTML5 możesz to zrobić:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}
HTML:
<header>blabablalba </header>
<section> Content </section>
U mnie następny działał dobrze:
Nagłówek i zawartość zawinąłem w div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>
Użyłem tego odniesienia, aby wypełnić wysokość za pomocą flexbox. CSS wygląda tak:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}
Aby uzyskać więcej informacji na temat techniki flexbox, odwiedź odnośnik
Możesz także ustawić rodzica na display: inline
. Zobacz http://codepen.io/tommymarshall/pen/cECyH
Upewnij się, że wysokość html i body również jest ustawiona na 100%.
Przyjęta odpowiedź nie działa. A najwyższa głosowana odpowiedź nie odpowiada faktycznemu pytaniu. Z nagłówkiem o stałej wysokości w pikselach i wypełniaczem na pozostałym ekranie przeglądarki i przewijaj, aby wyświetlić owerflow. Oto rozwiązanie, które faktycznie działa, wykorzystując pozycjonowanie bezwzględne. Zakładam też, że wysokość nagłówka jest znana z dźwięku "stałego nagłówka" w pytaniu. Jako przykład używam 150px:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
CSS: (dodawanie koloru tła tylko dla efektu wizualnego)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}
Aby uzyskać bardziej szczegółowe spojrzenie na to, jak to działa, z rzeczywistą zawartością wewnątrz #Content
, spójrz na ten plik jsfiddle , używając wierszy i kolumn ładowania początkowego.
bottom
Nieruchomość upewnił się, że #Content
pozostaje zatrzymany na końcu strony. Doceniam, że poświęciłeś czas na wyjaśnienie.
W tym przypadku chcę, aby główny element div zawartości był płynny, tak aby cała strona zajmowała 100% wysokości przeglądarki.
height: 100vh;
Dodaję tutaj moje 5 centów i zaproponuję klasyczne rozwiązanie:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>
To zadziała we wszystkich przeglądarkach, bez skryptu, bez fleksa. Otwórz fragment kodu w trybie pełnej strony i zmień rozmiar przeglądarki: pożądane proporcje są zachowywane nawet w trybie pełnoekranowym.
idHeader.height
i idContent.top
są dostosowywane w celu uwzględnienia obramowania i powinny mieć tę samą wartość, jeśli obramowanie nie jest używane. W przeciwnym razie elementy wyjdą z widoku, ponieważ obliczona szerokość nie obejmuje obramowania, marginesu i / lub wypełnienia.left:0; right:0;
można zastąpić width:100%
z tego samego powodu, jeśli nie ma obramowania.padding-top
i / lub
padding-bottom
atrybuty do #idOuter
elementu.Aby zakończyć moją odpowiedź, oto układ stopki:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
A oto układ z nagłówkiem i stopką:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}
<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>
Jeśli nie potrzebujesz obsługi IE 9 i starszych, użyłbym flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }
Musisz także uzyskać treść, aby wypełnić całą stronę
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
PLaY CSS | Stały układ nagłówka / stopki / wyśrodkowanej jednej kolumny w różnych przeglądarkach
Ramki CSS, wersja 2: Przykład 2, określona szerokość | 456 Berea Street
Jedną ważną rzeczą jest to, że chociaż brzmi to łatwo, do pliku CSS będzie wchodzić sporo brzydkiego kodu, aby uzyskać taki efekt. Niestety, to naprawdę jedyna opcja.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}
Najlepszym rozwiązaniem, jakie do tej pory znalazłem, jest ustawienie elementu stopki na dole strony, a następnie oszacowanie różnicy przesunięcia stopki od elementu, który musimy rozwinąć. na przykład
<div id="contents"></div>
<div id="footer"></div>
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');
Możesz również chcieć zaktualizować wysokość elementu zawartości przy każdej zmianie rozmiaru okna, więc ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});
Czy próbowałeś czegoś takiego?
CSS:
.content {
height: 100%;
display: block;
}
HTML:
<div class=".content">
<!-- Content goes here -->
</div>