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
1
A
Antwort
1
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>
+0
Aber Header sollte nicht statische Höhe –
+0
@ TolgaKısaoğulları mit einem kleinen JS aktualisiert. – Randy
Verwandte Themen
- 1. Volle Höhe div nicht dehnen
- 2. Dynamische Höhe bis zum Ende des Browsers mit CSS
- 3. jQuery - dynamische div Höhe gleich der Höhe des gesamten Fensters
- 4. 100% Höhe div zwischen Kopfzeile und Fußzeile
- 5. Wie bis Ende des Trennzeichens zu löschen?
- 6. Ermitteln Sie die Entfernung von der Spitze eines Div bis zum Anfang des Fensters mit Javascript
- 7. jQuery blättern bis zum Ende der Chatbox
- 8. Breite der DIV abhängig von der Breite des Fensters
- 9. Runden java.util.Date bis zum Ende des Tages
- 10. Bootstrap div Strecke bis zum Ende der Seite
- 11. Wie stoppe ich das Senden des Formulars bis zum Ende?
- 12. Wie erweitere ich die Seitenleiste bis zum Ende des Inhalts?
- 13. wie bis zum Ende von/proc-Datei
- 14. Make Div-Element 100% Höhe des Browser-Fensters mit CSS
- 15. Erweiterung der Highcharts Linienserie bis zum Ende des Diagramms
- 16. Ausrichten div am unteren Rand des Fensters Innenhöhe
- 17. Scrollen Sie bis zum Ende der Seite
- 18. Attach div Element am Ende der Seite
- 19. Bild wird zum Dehnen eines
- 20. Bootstrap 3 - Höhe des modalen Fensters entsprechend der Bildschirmgröße einstellen
- 21. Delphi: Erkennen von Anfang und Ende des Fensters bewegen
- 22. Tab div nicht dehnen zu Inline-Inhalt. jQuery tabs
- 23. Entfernung von Str bis zum Ende (Python)
- 24. Wie DIV Höhe 100% zwischen Kopfzeile und Fußzeile
- 25. CSS Push Div zum Ende der Seite
- 26. Wiederholen Sie einen Vim-Makro bis zum Ende des Puffers
- 27. Ich führe das css bis zum Ende des head Tags
- 28. Kann UIImageView nicht bis zum Ende des UIScrollview ziehen?
- 29. Einstellung UITextView Cursor-Position bis zum Ende des Textes
- 30. Erhalten Sie Sekunden bis zum Ende des Tages in PHP
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;}