Zrób div wypełnij wysokość pozostałej przestrzeni ekranu
Obecnie pracuję nad aplikacją internetową, w której chcę, aby zawartość wypełniała wysokość całego ekranu.
Strona ma nagłówek, który zawiera logo i informacje o koncie. To może być dowolna wysokość. Chcę, aby content div wypełnił resztę strony na dole.
Mam nagłówek div i treść div. W tej chwili używam tabeli dla układu tak:
CSS i HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>Cała wysokość strony jest wypełniona i nie jest wymagane przewijanie.
Dla czegokolwiek wewnątrz content div, ustawienie top: 0; umieści go tuż pod nagłówkiem. Czasami zawartość będzie prawdziwym stołem, z jego wysokością ustawioną na 100%. Umieszczenie header wewnątrz content nie pozwoli na to.
Czy istnieje sposób na osiągnięcie tego samego efektu bez użycia table?
Update:
Elementy wewnątrz zawartości div będzie również wysokość ustawiona na wartości procentowe. Więc coś w 100% wewnątrz div wypełni go do dna. Podobnie jak dwa elementy w 50%.
Aktualizacja 2:
Na przykład, jeśli nagłówek zajmuje 20% wysokości ekranu, tabela określona na 50% wewnątrz #content zajmowałaby 40% powierzchni ekranu. Jak na razie, zawijanie całej rzeczy w stół jest jedyną rzeczą, która działa.
30 answers
Aktualizacja 2015: podejście flexbox
Istnieją dwie inne odpowiedzi krótko wspominające flexbox ; jednak było to ponad dwa lata temu i nie podają żadnych przykładów. Specyfikacja flexbox została już definitywnie ustalona.
Uwaga: chociaż Specyfikacja układu CSS Flexible Boxes jest na etapie rekomendacji kandydata, nie wszystkie przeglądarki ją zaimplementowały. Implementacja WebKit musi być poprzedzona prefiksem-webkit -; Internet Explorer implementuje starą wersja specyfikacji, poprzedzona-ms-; Opera 12.10 implementuje najnowszą wersję specyfikacji, nieprzygotowaną. Aktualny stan zgodności znajduje się w tabeli zgodności na każdej właściwości.
(zaczerpnięte z https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )
Wszystkie główne przeglądarki i IE11+ obsługują Flexbox. Dla IE 10 lub starszych, można użyć flexiejs shim.
Aby sprawdzić aktualne wsparcie możesz również zobaczyć proszę.: http://caniuse.com/#feat=flexbox
Przykład roboczy
Dzięki flexbox możesz łatwo przełączać się między wierszami lub kolumnami o stałych wymiarach, wymiarach zawartości lub pozostałych wymiarach przestrzeni. W moim przykładzie ustawiłem nagłówek, aby przyciągał do jego zawartości( zgodnie z pytaniem OPs), dodałem stopkę, aby pokazać, jak dodać Region o stałej wysokości, a następnie ustawić obszar zawartości, aby wypełnić pozostałe miejsce.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>W powyższym CSS właściwość flex jest skrótem flex-grow, właściwości Flex-shrink i flex-basis w celu ustalenia elastyczności elementów flex. Mozilla ma dobre wprowadzenie do modelu elastycznych pudełek .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-19 19:30:17
Naprawdę nie ma dźwięku, cross-browser sposób, aby to zrobić w CSS. Zakładając, że twój układ ma złożoność, musisz użyć JavaScript, aby ustawić wysokość elementu. Istotą tego, co musisz zrobić, jest:
Element Height = Viewport height - element.offset.top - desired bottom margin
Po pobraniu tej wartości i ustawieniu wysokości elementu, należy dołączyć procedury obsługi zdarzeń zarówno do okna onload, jak i onresize, aby można było uruchomić funkcję zmiany rozmiaru.
Również, zakładając, że zawartość może być większa niż widok, musisz ustawić overflow-y do przewijania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-03 17:52:04
Oryginalny post jest ponad 3 lata temu. Myślę, że wiele osób, które przychodzą do tego postu, takich jak ja, szuka rozwiązania układu podobnego do aplikacji, powiedzmy, że w jakiś sposób naprawiony Nagłówek, Stopka i pełna zawartość wysokościowa zajmująca ekran reszty. Jeśli tak, ten post może pomóc, działa na IE7+, itp.
Http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
A oto kilka fragmentów z tego postu:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-11 08:16:00
Zamiast używać tabel w znacznikach, możesz użyć tabel CSS.
Znaczniki
<body>
<div>hello </div>
<div>there</div>
</body>
(odpowiedni) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
FIDDLE1 oraz FIDDLE2
Niektóre zalety tej metody to:
1) mniej znaczników
2) znaczniki są bardziej semantyczne niż tabele, ponieważ nie są to dane tabelaryczne.
[[3]} 3) obsługa przeglądarki jest Bardzo dobra : IE8+, wszystkie nowoczesne przeglądarki i urządzenia mobilne (caniuse )Dla kompletności, tutaj są równoważne elementy Html do właściwości css dla modelu tabeli CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-13 14:09:16
Podejście tylko do CSS (jeśli wysokość jest znana/stała)
Jeśli chcesz, aby środkowy element rozciągał się na całej stronie w pionie, możesz użyć calc() który został wprowadzony w CSS3.
Zakładając, że mamy stałą wysokość header i footer elementów i chcemy, aby znacznik section przyjmował całą dostępną wysokość pionową...
Demo
Zakładane znaczniki
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Więc twój CSS powinien być
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Więc tutaj, to, co robię, to sumowanie wysokości elementów, a następnie wyprowadzanie z 100% za pomocą funkcji calc().
Upewnij się, że używasz height: 100%; dla elementów nadrzędnych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-05 16:00:53
Używane:
height: calc(100vh - 110px);
Kod:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-22 03:20:04
Można to zrobić wyłącznie przez CSS używając vh:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
I HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Sprawdziłem, działa we wszystkich głównych przeglądarkach: Chrome, IE, i FireFox
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-14 22:02:24
Żadne z opublikowanych rozwiązań nie działa, gdy potrzebujesz dolnego div do przewijania, gdy zawartość jest zbyt wysoka. Oto rozwiązanie, które działa w tym przypadku:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Oryginalne źródło: wypełnienie pozostałej wysokości kontenera podczas obsługi przelewu w CSS
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-28 13:20:37
Na to też szukałem odpowiedzi. Jeśli masz wystarczająco dużo szczęścia, aby móc kierować IE8 i wyżej, możesz użyć display:table i powiązanych wartości, aby uzyskać reguły renderowania tabel z elementami na poziomie bloków, w tym div.
Jeśli masz jeszcze więcej szczęścia, a twoi użytkownicy korzystają z przeglądarek najwyższego poziomu (na przykład, jeśli jest to aplikacja intranetowa na komputerach, które kontrolujesz, jak mój najnowszy projekt), możesz użyć nowego elastycznego układu pudełek W CSS3!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-26 19:20:39
CSS3 Simple Way
height: calc(100% - 10px); // 10px is height of your first div...
Wszystkie główne przeglądarki w dzisiejszych czasach ją obsługują, więc śmiało, jeśli nie masz wymogu obsługi starych przeglądarek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-11 16:13:52
Może po prostu użyj vh, co oznacza view height W CSS ...
Spójrz na fragment kodu stworzony dla Ciebie poniżej i uruchom go:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>Spójrz również na obrazek poniżej, który dla Ciebie stworzyłem:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-01 05:46:05
To, co zadziałało dla mnie (z div w innym div I zakładam, że we wszystkich innych okolicznościach), to ustawienie dolnej wyściółki na 100%. Oznacza to, że dodaj to do arkusza stylów css:
padding-bottom: 100%;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-31 10:28:29
Proste rozwiązanie, używając flexbox:
<div>header</div>
<div class="content"></div>
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-27 18:26:06
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
We wszystkich przeglądarkach można umieścić div "header" przed zawartością, a ten sam CSS będzie działał. Jednak IE7-nie interpretuje poprawnie wysokości, jeśli float wynosi w tym przypadku 100%, więc nagłówek musi znajdować się w treści, jak powyżej. Przepełnienie: auto spowoduje Podwójne paski przewijania w IE (który zawsze ma widoczny pasek przewijania viewport, ale jest wyłączony), ale bez niego, zawartość zostanie przycięta, jeśli przepełni się.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-18 06:01:58
Zastrzeżenie: przyjęta odpowiedź daje pomysł na rozwiązanie, ale uważam, że jest trochę nadęty niepotrzebnym opakowaniem i regułami css. Poniżej znajduje się rozwiązanie z bardzo nielicznymi regułami css.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
Powyższe rozwiązanie wykorzystuje jednostki widoku i flexbox i dlatego jest IE10+, pod warunkiem, że używasz starej składni dla IE10.
Codepen do gry: link do codepen
Lub ten, dla tych, którzy potrzebują głównego kontenera do przewijania w przypadku przepełnionej zawartości: link do codepen
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-03 17:16:47
Jeśli masz do czynienia z nie obsługą starych przeglądarek (czyli MSIE 9 lub starszych), możesz to zrobić za pomocą elastycznego modułu układu pudełkowego, który jest już W3C CR. Moduł ten umożliwia również inne fajne sztuczki, takie jak ponowne zamawianie treści.
Niestety, MSIE 9 lub mniejsze nie obsługują tego i musisz użyć vendor prefix dla właściwości CSS dla każdej przeglądarki innej niż Firefox. Mam nadzieję, że inni sprzedawcy szybko też zrezygnują z prefiksu.
Innym wyborem będzie CSS Grid Layout , ale ma jeszcze mniejsze wsparcie ze stabilnych wersji przeglądarek. W praktyce obsługuje to tylko MSIE 10.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-03 10:55:31
Zmagałem się z tym przez jakiś czas i skończyło się na następujących:
Ponieważ łatwo jest uczynić content div taką samą wysokością jak rodzic, ale najwyraźniej trudno jest uczynić go wysokością rodzica minus wysokość nagłówka, postanowiłem zrobić content div pełną wysokością, ale umieścić go absolutnie w lewym górnym rogu, a następnie zdefiniować wyściółkę dla Góry, która ma wysokość nagłówka. W ten sposób zawartość wyświetla się starannie pod nagłówkiem i wypełnia całą pozostałą spacja:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-31 10:39:44
Dlaczego nie tak po prostu?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Daje Ci html i body (w tej kolejności) wysokość, a następnie po prostu nadaje Twoim elementom wysokość?
Działa dla mnie
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-22 00:05:50
Jest mnóstwo odpowiedzi teraz, ale znalazłem używając height: 100vh; do pracy na elemencie div, który musi wypełnić całą dostępną przestrzeń pionową.
W ten sposób nie muszę bawić się wyświetlaczem ani pozycjonowaniem. Przydało się to podczas używania Bootstrap, aby stworzyć pulpit nawigacyjny, w którym miałem pasek boczny i główny. Chciałem, aby główny rozciągnął się i wypełnił całą pionową przestrzeń, abym mógł zastosować kolor tła.
div {
height: 100vh;
}
Obsługuje IE9 i up: Kliknij, aby zobaczyć link
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-26 23:24:08
Możesz użyć display: table, aby podzielić obszar na dwa elementy (nagłówek i zawartość), gdzie nagłówek może różnić się wysokością, a zawartość wypełnia pozostałą przestrzeń. Działa to z całą stroną, a także wtedy, gdy obszar jest po prostu zawartością innego elementu umieszczonego z position ustawionym na relative, absolute lub fixed. Będzie działać tak długo, jak element nadrzędny ma niezerową wysokość.
Zobacz ten wpis , a także kod poniżej:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-01 14:47:28
Vincent, odpowiem ponownie, używając twoich nowych wymagań. Ponieważ nie obchodzi cię, że zawartość jest ukryta, jeśli jest zbyt długa, nie musisz unosić nagłówka. Wystarczy umieścić przepełnienie Ukryte na znacznikach html i body i ustawić wysokość #content na 100%. Zawartość zawsze będzie dłuższa niż widok o wysokość nagłówka, ale będzie ukryta i nie spowoduje pasków przewijania.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-20 23:11:27
CSS Grid Solution
Po prostu definiujemy body za pomocą display:grid i grid-template-rows używając auto i fr właściwości value.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>Kompletny przewodnik po siatkach @ CSS-Tricks.com
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-04 14:27:17
Spróbuj tego
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-31 10:40:22
style="height:100vh"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-23 10:43:44
Znalazłem dość proste rozwiązanie, ponieważ dla mnie była to tylko kwestia projektowa. Chciałem, żeby reszta strony nie była biała pod czerwoną stopką. Więc ustawiłem kolor tła strony na czerwony. A zawartość tła kolor na biały. Z wysokością zawartości ustawioną na np. 20em lub 50% prawie pusta strona nie pozostawi całej strony czerwonej.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-14 08:02:34
Do aplikacji mobilnej używam tylko VH i VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-01 15:59:23
Miałem ten sam problem, ale nie mogłem wykonać rozwiązania z flexboxami powyżej. Stworzyłem więc własny szablon, który zawiera:
- nagłówek z elementem o stałej wielkości
- stopka
- pasek boczny z paskiem przewijania, który zajmuje pozostałą wysokość
- content
Użyłem flexboxów, ale w prostszy sposób, używając tylko właściwości display: flex oraz Flex-direction: row|column :
Używam angular i chcę Mojego rozmiary komponentów, aby stanowiły 100% ich elementu nadrzędnego.
Kluczem jest ustawienie rozmiaru (w procentach) dla wszystkich rodziców, aby ograniczyć ich rozmiar. W poniższym przykładzie wysokość myapp ma 100% viewport.
Główny komponent ma 90% widoku, ponieważ nagłówek i stopka mają 5%.
Umieściłem tu swój szablon: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-25 16:20:25
/ Align = "left" / ..
Wydaje się to czystszym rozwiązaniem niż popularny flex box dla przeglądarek obsługujących CSS3.
Po prostu użyj min-height (zamiast height) za pomocą calc () do bloku zawartości.
Calc () zaczyna się od 100% i odejmuje wysokość nagłówków i stopek (musi zawierać wartości wypełnienia)
Używanie "min-height "zamiast" height " jest szczególnie przydatne, więc może pracować z treścią renderowaną w javascript i frameworkami JS, takimi jak Angular2 W przeciwnym razie obliczenie nie spowoduje przesunięcia stopki na dół strony po wyświetleniu zawartości renderowanej w języku javascript.
Oto prosty przykład nagłówka i stopki wykorzystujących wysokość 50px i padding 20px dla obu.
Html:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
Css:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Oczywiście, matematyka może być uproszczona, ale masz pomysł...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-13 11:01:29
Jest to dynamiczny Kalkulator przestrzeni ekranu, lepiej używając Javascript.
Możesz użyć technologii CSS-IN-JS, jak poniżej:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-13 02:28:18
To nigdy nie działało dla mnie w inny sposób niż przy użyciu JavaScript , jak zasugerował NICCAI w pierwszej odpowiedzi. Używam tego podejścia do przeskalowania <div> z Google Maps.
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
JS
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-28 13:15:29