Jak zrobić główną zawartość div wysokość wypełnienia ekranu z css [duplicate]

Question

Jak zrobić główną zawartość div wysokość wypełnienia ekranu z css [duplicate]

To pytanie ma już odpowiedź tutaj:

aby div wypełnić wysokość pozostałej przestrzeni ekranu 31 odpowiedzi

Więc mam stronę internetową z nagłówkiem, mainbody i stopką. Chcę, aby główne ciało wypełniło 100% strony (wypełnij 100% między stopką a nagłówkiem) Moja stopka to pozycja absolutna z dnem: 0. Za każdym razem staram się ustawić mainbody do 100% wysokości lub zmienić pozycję lub coś to również przepełni nagłówek. Jeśli ustawisz ciało na pozycję absolutną z top: 40 (ponieważ mój nagłówek ma wysokość 40px), to po prostu przejdzie o 40px za daleko w dół, tworząc pasek przewijania.

Stworzyłem prosty plik html, ponieważ nie mogę opublikować całej strony / css z rzeczywistego projektu. Z przykładowym kodem, mimo że ciało maincontent wypełnia ekran, idzie 40px za daleko w dół(przyczyna nagłówka zakładam).

html, body{
margin: 0;
padding: 0;}

header{
height: 40px;
width: 100%;
background-color: blue;
}

#maincontent{
background-color: green;
height: 100%;
width: 100%;
}

footer{
height: 40px;
width: 100%;
background-color: grey;
  position: absolute;
    bottom: 0;
}

The html

<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">

</div>

<footer></footer>
</body>
</html>

Ktoś zna odpowiedź?

62

javascript html css html5 css3

Author: vaxquis, 2013-09-06

Source

10 answers

Nie wymaga to Javascript, absolutnego pozycjonowania i stałych wysokości.

Oto metoda all CSS / CSS only, która nie wymaga stałych wysokości ani bezwzględnego pozycjonowania :

CSS

.container { 
  display: table;
}
.content { 
  display: table-row; 
  height: 100%; 
}
.content-body { 
  display: table-cell;
}

HTML

<div class="container">
  <header class="header">
    <p>This is the header</p>
  </header>
  <section class="content">
    <div class="content-body">
      <p>This is the content.</p>
    </div>
  </section>
  <footer class="footer">
    <p>This is the footer.</p>
  </footer>
</div>

Zobacz go w akcji tutaj: http://jsfiddle.net/AzLQY/

Zaletą tej metody jest to, że stopka i nagłówek mogą rosnąć, aby dopasować ich zawartość, a ciało automatycznie dostosuje się siebie. Możesz również ograniczyć ich wysokość za pomocą css.

56

Author: Mark Murphy,
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-02 14:38:37

Istnieje jednostka CSS o nazwie viewport height / viewport width.

Przykład

.mainbody{height: 100vh;} podobnie html,body{width: 100vw;}

Lub 90vh = 90% wysokości widoku.

**IE9+ i większość nowoczesnych przeglądarek.

41

Author: joyBlanks,
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-30 06:58:30

Pozwala to na wyśrodkowanie treści o minimalnej szerokości, aby moje formularze nie zawalały się:

html {
    overflow-y: scroll;
    height: 100%;
    margin: 0px auto;
    padding: 0;
}

body {
    height: 100%;
    margin: 0px auto;
    max-width: 960px;
    min-width: 750px;
    padding: 0;
}
div#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}

div#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

div#pageContent {
    padding-bottom: 60px;
}

div#header {
    width: 100%;
}

A moja strona layoutu wygląda tak:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title></title>
</head>
<body>
<div id="wrapper">
        <div id="header"></div>
        <div id="pageContent"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

Przykład tutaj: http://data.nwtresearch.com/

Jeszcze jedna uwaga, jeśli chcesz, aby tło strony wyglądało tak, jak kod, który dodałeś, usuń height: auto !important; z wrappera div: http://jsfiddle.net/mdares/a8VVw/

5

Author: Matthew,
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-06 20:23:16

Używając top: 40px i bottom: 40px (zakładając, że Twoja stopka ma również 40px) bez określonej wysokości, możesz to uruchomić.

.header {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    background-color:red;
}
.mainBody {
    width: 100%;
    top: 40px;
    bottom: 40px;
    position: absolute;
    background-color: gray;
}
.footer {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: blue;
}

JSFiddle

3

Author: Tricky12,
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-06 19:57:52

Nie wiem dokładnie, czego szukasz, ale chyba Rozumiem.

Nagłówek-zostaje na górze ekranu? Stopka-pozostaje na dole ekranu? Obszar zawartości - > pasuje do przestrzeni między stopką a nagłówkiem?

Można to zrobić przez absolutne pozycjonowanie lub ze stałym pozycjonowaniem.

Oto przykład z pozycjonowaniem absolutnym: http://jsfiddle.net/FMYXY/1/

Znaczniki:

<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>

CSS:

.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }

Aby to działało najlepiej, chciałbym sugeruj użycie % zamiast pikseli, Ponieważ napotkasz problemy z różnymi rozmiarami ekranu/urządzenia.

1

Author: TyMayn,
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-06 19:48:31

Istnieją różne implementacje dla różnych przeglądarek.

Moim zdaniem najprostszym i najbardziej eleganckim rozwiązaniem jest użycie CSS calc(). Niestety ta metoda jest niedostępna w ie8 i less, a także niedostępna w przeglądarkach android i mobilnej operze. Jeśli jednak używasz do tego osobnych metod, możesz spróbować tego: http://jsfiddle.net/uRskD/

Znacznik:

<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>

I CSS:

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
    min-height: calc(100% - 40px);
}

Moje drugorzędne rozwiązanie polega na lepkim metoda stopki i rozmiar pudełka. To w zasadzie pozwala elementowi ciała wypełnić 100% wysokości jego rodzica i zawiera wyściółkę w tym 100% z box-sizing: border-box;. http://jsfiddle.net/uRskD/1/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#footer {
    background: #f0f;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#body {
    background: #0f0;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
}

Moją trzecią metodą byłoby użycie jQuery do ustawienia minimalnej wysokości głównego obszaru zawartości. http://jsfiddle.net/uRskD/2/

html, body {
    height: 100%;
    margin: 0;
}
#header {
    background: #f0f;
    height: 20px;
}
#footer {
    background: #f0f;
    height: 20px;
}
#body {
    background: #0f0;
}

I js:

$(function() {
    headerHeight = $('#header').height();
    footerHeight = $('#footer').height();
    windowHeight = $(window).height();
   $('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

1

Author: Chad,
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-06 20:07:07

Wartości względne, takie jak: height: 100% będzie używać elementu nadrzędnego w HTML jako odniesienia, aby użyć wartości względnych w wysokości, musisz sprawić, że znaczniki html i body będą miały 100% wysokości, tak:

HTML

<body>
    <div class='content'></div>
</body>

CSS

html, body
{
    height: 100%;
}

.content
{
    background: red;
    width: 100%;
    height: 100%;
}

Http://jsfiddle.net/u91Lav16/1/

1

Author: Adriano Moura,
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-19 12:30:59

Chociaż to może wydawać się łatwym problemem, ale tak naprawdę nie jest!

Próbowałem wielu rzeczy, aby osiągnąć to, co próbujesz zrobić z czystym CSS, i wszystkie moje próby były porażką. Ale.. jest możliwe rozwiązanie, jeśli używasz javascript lub jquery!

Zakładając, że masz ten CSS:

#myheader {
    width: 100%;
}
#mybody {
    width: 100%;
}
#myfooter {
    width: 100%;
}

Zakładając, że masz ten HTML:

<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>

Spróbuj z jquery:

<script>
    $(document).ready(function() {
        var windowHeight = $(window).height();/* get the browser visible height on screen */
        var headerHeight = $('#myheader').height();/* get the header visible height on screen */
        var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
        var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
        var newBodyHeight = windowHeight - headerHeight - footerHeight;
        if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
            $('#mybody').height(newBodyHeight);
        }
    });
</script>

Uwaga: nie używam pozycjonowania absolutnego w tym rozwiązaniu, ponieważ może to wyglądać brzydko w mobile przeglądarki

0

Author: evilReiko,
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-06 19:52:06

To pytanie jest duplikatem Wykonaj div wypełniając wysokość pozostałej przestrzeni ekranu , A prawidłową odpowiedzią jest użycie modelu flexbox .

Wszystkie główne przeglądarki i IE11+ obsługują Flexbox. Dla IE 10 lub starszych, lub Android 4.3 i starszych, można użyć FlexieJS shim.

Zauważ jak proste są znaczniki i CSS. Żadnych hacków.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid orange;
}

#footer{
  background: lime;
}

<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

W CSS powyżej, flex skróty właściwości 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 .

-7

Author: Dan Dascalescu,
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-19 00:34:27

score 103 · Accepted Answer

nie jest potrzebna wysokość w %
nie jest potrzebne jQuery

(!) stretch div using bottom & top:

.mainbody{
       position: absolute;
       top: 40px; /* Header Height */
       bottom: 20px; /* Footer Height */
       width: 100%;
    }

Sprawdź mój kod: http://jsfiddle.net/aslancods/mW9WF/