Ich habe eine Navigationsleiste auf der linken Seite meiner Seite und möchte, dass sie sich auf 100% der Seitenhöhe erstreckt. Nicht nur die Höhe des Ansichtsfensters, sondern auch die Bereiche, die bis zum Scrollen ausgeblendet sind. Ich möchte kein Javascript verwenden, um dies zu erreichen.
Kann es in HTML / CSS gemacht werden?
Antworten:
Hier ist die Lösung, die ich mir endlich ausgedacht habe, als ich ein div als Container für einen dynamischen Hintergrund verwendet habe.
z-indexfür Nicht-Hintergrund-Zwecke.leftoder rightfür eine Säule voller Höhe.topoder bottomfür eine Reihe voller Breite.BEARBEITEN 1: CSS unten wurde bearbeitet, da es in FF und Chrome nicht korrekt angezeigt wurde. verschoben position:relative, um im HTML zu sein und den Body auf height:100%anstelle von zu setzen min-height:100%.
BEARBEITEN 2: Zusätzliche Kommentare zu CSS hinzugefügt. Einige weitere Anweisungen wurden hinzugefügt.
Das CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}Das HTML:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Warum?
html{min-height:100%;position:relative;}Ohne dies wird der Cloud-Container DIV aus dem Layoutkontext des HTML entfernt. position: relativestellt sicher, dass der DIV beim Zeichnen im HTML-Feld bleibt, sodass er bottom:0sich auf den unteren Rand des HTML-Felds bezieht. Sie können height:100%den Cloud-Container auch verwenden, da er sich jetzt auf die Höhe des HTML-Tags und nicht auf das Ansichtsfenster bezieht.
htmlElement eine Mindesthöhe (und nicht nur eine Höhe) verwenden müssen. Warum ist das so?
heightheißt, du bist so groß; nicht mehr und nicht weniger. ' Dies bedeutet, dass es sich um die Höhe des Ansichtsfensters handelt. Wir möchten, dass es mindestens so hoch wie das Ansichtsfenster oder höher ist. min-heightmacht das schön.
<html>und das Positionieren im Ansichtsfenster zwei getrennte Dinge waren. Danke dir!
Mit HTML5 ist es am einfachsten, dies zu tun height: 100vh. Wobei 'vh' für die Höhe des Ansichtsfensters des Browserfensters steht. Reagiert auf die Größenänderung von Browsern und Mobilgeräten.
vw.
Ich hatte ein ähnliches Problem und die Lösung bestand darin, dies zu tun:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Ich wollte ein seitenzentriertes Div mit einer Höhe von 100% der Seitenhöhe, daher war meine Gesamtlösung:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}Möglicherweise müssen Sie ein übergeordnetes Element (oder einfach 'body') erstellen position: relative;
cloud-container?
Sie können mit Faux Columns betrügen oder Sie können einige CSS-Tricks verwenden
Es ist einfach, eine Tabelle zu verwenden:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>Als DIV eingeführt wurde, hatten die Leute solche Angst vor Tischen, dass der arme DIV zum metaphorischen Hammer wurde.
Verwenden Sie die absolute Position. Beachten Sie, dass wir es im Allgemeinen nicht gewohnt sind, Positionsabsolut zu verwenden, was das manuelle Auslegen von Dingen oder schwebende Dialoge erfordert. Dies wird automatisch verlängert, wenn Sie die Größe des Fensters oder des Inhalts ändern. Ich glaube, dass dies den Standardmodus erfordert, aber in IE6 und höher funktioniert.
Ersetzen Sie einfach das div durch die ID 'thecontent' durch Ihren Inhalt (die angegebene Höhe dient nur zur Veranschaulichung, Sie müssen keine Höhe für den tatsächlichen Inhalt angeben.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>Dies funktioniert so, dass das äußere Div als Referenzpunkt für die Navigationsleiste fungiert. Das äußere Div wird durch den Inhalt des 'Content'-Div gestreckt. Die Navigationsleiste verwendet die absolute Positionierung, um sich auf die Höhe des übergeordneten Elements auszudehnen. Für die horizontale Ausrichtung versetzen wir den Inhaltsbereich selbst um die gleiche Breite der Navigationsleiste.
Dies wird mit dem CSS3-Flexbox-Modell erheblich vereinfacht, ist jedoch im IE noch nicht verfügbar und weist einige Besonderheiten auf.
Wenn Sie auf modernere Browser abzielen, kann das Leben sehr einfach sein. Versuchen:
.elem{
height: 100vh;
}Wenn Sie es bei 50% der Seite benötigen, ersetzen Sie 100 durch 50.
Ich bin auf dasselbe Problem gestoßen wie Sie. Ich wollte ein machenDIV Hintergrund machen, warum, weil es einfach ist, div durch Javascript zu manipulieren. Sowieso drei Dinge, die ich in der CSS für diese Div getan habe.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}Ich möchte die gesamte Webseite abdecken, bevor ich ein modales Popup auffordere. Ich habe viele Methoden mit CSS und Javascript ausprobiert, aber keine davon hilft, bis ich die folgende Lösung gefunden habe. Es funktioniert bei mir, ich hoffe es hilft dir auch.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>Viel Glück ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>Einfach, wickeln Sie es einfach in eine Tabelle div ...
Der HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>Das CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>