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 - vmaxnadal nie jest obsługiwane w IE, więc może to nie być jeszcze najlepsze rozwiązanie dla wszystkich.
min-height: 100vhbył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-heighti 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 elementPrzyjęte rozwiązanie w rzeczywistości nie zadziała. Można zauważyć, że zawartość divbędzie równa wysokości jego rodzica body. Zatem ustawienie bodywysokości na 100%spowoduje ustawienie jej równej wysokości okna przeglądarki. Powiedzmy, że okno przeglądarki miało 768pxwysokość, ustawiając divwysokość zawartości na 100%, divwysokość z kolei będzie wynosić 768px. W ten sposób zostanie utworzony element div nagłówka, 150pxa element div zawartości 768px. W końcu zawartość będzie 150pxznajdować 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.
bottomNieruchomość upewnił się, że #Contentpozostaje 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.heighti idContent.topsą 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-topi / lub
padding-bottomatrybuty do #idOuterelementu.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>