Wie div Höhe von der Kopfzeile bis zum Ende des Fensters zu dehnen

Ich versuche, eine Konstruktion zu machen, wie Sie unten sehen können. 2.Div sollte von der Kopfzeile bis zum Ende des Fensters gestreckt werden. Übrigens verwende ich ein Layout, das "Kopfzeile" und "Fußzeile" enthält, so dass "Kopfzeile" und "Fußzeile" aus dem Layout stammen. Wenn die Seite geöffnet wurde, sollten nur 1.div und 2.div sichtbar sein, dann sollte das Scrollen nach anderen divs erfolgen.Wie div Höhe von der Kopfzeile bis zum Ende des Fensters zu dehnen

Quelle

2016-08-04 Tolga Kısaoğulları

einige html bieten und CSS Sie haben –

tun können Sie Ihr versucht, HTML und CSS-Code platzieren ... – vignesh

Eigentlich habe ich nur das Layout Seite getan, und es enthält nur das ist, Kopf- und Fußzeile alle. .header {padding-bottom: 31px; position: relative;} { .footer display: block; position: relative;}

verwirrt I wie kann ich mache 2.div so ohne prozentsätze. –

Weil Sie einen Header haben, die eine relative Höhe hat, könnte man diesen Trick mit JQuery tun;

Stellen Sie die Höhe des Elements .body ein, indem Sie die .header Höhe von der <body> Taghöhe subtrahieren.

$('.bodycontent').height(
 
    $('body').height() - $('.header').height() 
 
);

html, body { 
 
    height:100%; 
 
} 
 

 
.header { 
 
    background-color:red; 
 
} 
 

 
.bodycontent { 
 
    background-color:blue; 
 
} 
 

 
.third { 
 
    height:30%; 
 
    background-color:pink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    header 
 
</div> 
 

 
<div class="bodycontent"> 
 
    
 
</div> 
 

 
<div class="third"> 
 
    
 
</div>

Quelle

2016-08-04 08:36:46 Randy

Aber Header sollte nicht statische Höhe –

@ TolgaKısaoğulları mit einem kleinen JS aktualisiert. – Randy

Wie div Höhe von der Kopfzeile bis zum Ende des Fensters zu dehnen

Antwort

Verwandte Themen