Ho una barra di navigazione sul lato sinistro della mia pagina e voglio che si estenda al 100% dell'altezza della pagina. Non solo l'altezza della finestra, ma includendo le aree nascoste fino allo scorrimento. Non voglio usare JavaScript per raggiungere questo obiettivo.
Può essere fatto in HTML / CSS?
Risposte:
Ecco la soluzione che ho finalmente trovato quando ho usato un div come contenitore per uno sfondo dinamico.
z-indexper usi non in background.lefto rightper una colonna a tutta altezza.topo bottomper una riga a larghezza intera.EDIT 1: CSS sotto è stato modificato perché non è stato mostrato correttamente in FF e Chrome. spostato position:relativesu HTML e imposta body height:100%invece di min-height:100%.
EDIT 2: Aggiunti commenti extra ai CSS. Aggiunte alcune altre istruzioni sopra.
Il 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! */
}Il codice HTML:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Perché?
html{min-height:100%;position:relative;}Senza questo, il DIV del contenitore cloud viene rimosso dal contesto di layout dell'HTML. position: relativeassicura che il DIV rimanga all'interno della casella HTML quando viene disegnato in modo che faccia bottom:0riferimento alla parte inferiore della casella HTML. Puoi anche usarlo height:100%sul cloud-container in quanto ora si riferisce all'altezza del tag HTML e non alla finestra.
htmlsull'elemento. Perché?
heightsta dicendo 'sei così alto; niente di più e niente di meno ". Ciò significa che sarà l'altezza del viewport. Vogliamo che sia alto almeno quanto il viewport o più alto. min-heightlo fa bene.
<html>e il posizionamento nel viewport fossero due cose separate. Grazie!
Con HTML5, il modo più semplice è semplicemente farlo height: 100vh. Dove "vh" indica l'altezza della finestra della finestra del browser. Risponde al ridimensionamento del browser e dei dispositivi mobili.
vw.
Ho avuto un problema simile e la soluzione era di fare questo:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Volevo un div centrato sulla pagina con un'altezza del 100% dell'altezza della pagina, quindi la mia soluzione totale era:
#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*/
}Potrebbe essere necessario creare un elemento genitore (o semplicemente 'body') position: relative;
cloud-container?
Puoi imbrogliare usando Faux Columns oppure puoi usare alcuni trucchi CSS
È semplice usare una tabella:
<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>Quando fu introdotto DIV, la gente aveva tanta paura dei tavoli che il povero DIV divenne il martello metaforico.
Usa la posizione assoluta. Si noti che questo non è il modo in cui siamo generalmente abituati a utilizzare la posizione assoluta che richiede la disposizione manuale delle cose o la presenza di dialoghi mobili. Questo si allungherà automaticamente quando ridimensioni la finestra o il contenuto. Credo che ciò richieda la modalità standard ma funzionerà in IE6 e versioni successive.
Sostituisci semplicemente il div con l'id "contenuto" con il tuo contenuto (l'altezza specificata è solo a scopo illustrativo, non devi specificare un'altezza sul contenuto effettivo.
<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>Il modo in cui funziona è che il div esterno funge da punto di riferimento per la barra di navigazione. Il div esterno è allungato dal contenuto del div "contenuto". La barra di navigazione utilizza il posizionamento assoluto per allungarsi fino all'altezza del suo genitore. Per l'allineamento orizzontale facciamo div dividere il contenuto stesso della stessa larghezza della barra di navigazione.
Ciò è molto più semplice con il modello di box flessibile CSS3, ma non è ancora disponibile in IE e ha alcune sue peculiarità.
Se stai prendendo di mira browser più moderni, la vita può essere molto semplice. provare:
.elem{
height: 100vh;
}se ne hai bisogno al 50% della pagina, sostituisci 100 con 50.
Voglio coprire l'intera pagina Web prima di richiedere un popup modale. Ho provato molti metodi usando CSS e Javascript, ma nessuno di questi mi ha aiutato fino a quando non ho scoperto la seguente soluzione. Funziona per me, spero che aiuti anche te.
<!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>In bocca al lupo ;-)
* {
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>Semplice, basta avvolgerlo in un tavolo div ...
HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>Il CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>La risposta qui è ... NON PUOI. Tuttavia, puoi ancora risolvere il problema originale pensando in modo leggermente diverso.
Basta usare position: fixed. Quindi, indipendentemente da dove l'utente scorre, coprirà l'intera altezza:
.full-screen-height {
position: fixed;
width: 25vw;
height: 100vh;
z-index: 10000;
}Non è esattamente quello che vuoi?