Come posso forzare un blocco DIV a estendersi fino alla fine di una pagina anche se non ha contenuto?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Nel markup mostrato di seguito, sto cercando di estendere il div del contenuto fino alla fine della pagina, ma si estende solo se ci sono contenuti da visualizzare. Il motivo per cui voglio farlo è che il bordo verticale appare ancora nella pagina anche se non ci sono contenuti da visualizzare.
Ecco il mio HTML :
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
E il mio CSS :
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100%
}
#menu, #content {
width:1024px;
margin: 0 auto;
}
div#menu {
height: 25px;
background-color:#50657a;
}
Soluzione
Il tuo problema non è che il div non sia al 100% di altezza, ma che il contenitore attorno ad esso non lo sia. Questo aiuterà nel browser sospetto che tu stia utilizzando:
html,body { height:100%; }
Potrebbe essere necessario regolare anche il riempimento e i margini, ma questo ti consentirà di ottenere il 90% del percorso. Se devi farlo funzionare con tutti i browser, dovrai fare un po 'di confusione.
Questo sito ha alcuni esempi eccellenti:
http://www.brunildo.org/test/html_body_0.html < br>
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html
Consiglio anche di andare a http://quirksmode.org/
Altri suggerimenti
Cercherò di rispondere alla domanda direttamente nel titolo, piuttosto che essere deciso a mettere un piè di pagina in fondo alla pagina.
Estendi div fino alla fine della pagina se non c'è abbastanza contenuto per riempire la finestra verticale del browser disponibile:
Demo su (trascina la maniglia della cornice per vedere l'effetto): http://jsfiddle.net/NN7ky
(lato positivo: pulito, semplice. lato negativo: richiede flexbox - http://caniuse.com/flexbox )
HTML:
<body>
<div class=div1>
div1<br>
div1<br>
div1<br>
</div>
<div class=div2>
div2<br>
div2<br>
div2<br>
</div>
</body>
CSS:
* { padding: 0; margin: 0; }
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
body > * {
flex-shrink: 0;
}
.div1 { background-color: yellow; }
.div2 {
background-color: orange;
flex-grow: 1;
}
ta-da - o sono solo troppo assonnato
Prova a giocare con la seguente regola CSS:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Modifica l'altezza per adattarla alla tua pagina. height è menzionato due volte per la compatibilità tra browser.
puoi in qualche modo hackerarlo con la min-height dichiarazione
<div style="min-height: 100%">stuff</div>
Prova il " di Ryan Fait; Sticky Footer " soluzione,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to pagina -bottom-di-/
Funziona su IE, Firefox, Chrome, Safari e presumibilmente anche Opera, ma non l'ho testato. È un'ottima soluzione. Molto facile e affidabile da implementare.
La proprietà di altezza minima non è supportata da tutti i browser. Se hai bisogno del tuo #content per estenderne l'altezza su pagine più lunghe, la proprietà height lo taglierà corto.
È un po 'un trucco ma potresti aggiungere un div vuoto con una larghezza di 1px e un'altezza di es. 1000px all'interno del div #content. Ciò costringerà il contenuto ad essere alto almeno 1000 px e consentirà comunque a contenuti più lunghi di estendere l'altezza quando necessario
Anche se non è elegante come il puro CSS, un po 'di javascript può aiutare a raggiungere questo obiettivo:
<html>
<head>
<style type='text/css'>
div {
border: 1px solid #000000;
}
</style>
<script type='text/javascript'>
function expandToWindow(element) {
var margin = 10;
if (element.style.height < window.innerHeight) {
element.style.height = window.innerHeight - (2 * margin)
}
}
</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Prova:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Non l'ho ancora testato ...
Piè di pagina appiccicoso con altezza fissa:
Schema HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
</body>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#footer {
height: 60px;
}
Penso che il problema sarebbe stato risolto anche solo facendo riempire l'html al 100%, potrebbe essere body riempie il 100% dell'html ma html non riempie il 100% dello schermo.
Prova con:
html, body {
height: 100%;
}
Prova http://mystrd.at/modern-clean-css-sticky -footer /
Il link sopra è inattivo, ma questo link https://stackoverflow.com/a/18066619/1944643 è ok. : D
Demo:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://mystrd.at">
<meta name="robots" content="noindex, nofollow">
<title>James Dean CSS Sticky Footer</title>
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: orange;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<article>
<!-- or <div class="container">, etc. -->
<h1>James Dean CSS Sticky Footer</h1>
<p>Blah blah blah blah</p>
<p>More blah blah blah</p>
</article>
<footer>
<h1>Footer Content</h1>
</footer>
</body>
</html>
Potrebbe piacerti anche questo: http: // matthewjamestaylor .com / blog / ultimate-2-colonna di sinistra-menu-pixels.htm
Non è esattamente quello che hai chiesto, ma potrebbe anche soddisfare le tue esigenze.
Non ho il codice, ma so di averlo fatto una volta usando una combinazione di height: 1000px e margin-bottom: -1000px; Prova quello.
A seconda di come funziona il layout, potresti evitare di impostare lo sfondo sull'elemento <html>, che è sempre almeno l'altezza della finestra.
Non è possibile farlo utilizzando solo i fogli di stile (CSS). Alcuni browser non accetteranno
height: 100%;
come valore superiore al punto di vista della finestra del browser.
Javascript è la soluzione cross browser più semplice, anche se come detto, non bella o pulita.
Puoi usare " vh " unità di lunghezza per la proprietà di altezza minima dell'elemento stesso e dei suoi genitori. È supportato da IE9:
<body class="full-height">
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content" class="full-height">
</div>
</body>
CSS:
.full-height {
min-height: 100vh;
box-sizing: border-box;
}
Non la migliore o la migliore implementazione dei più grandi standard, ma puoi cambiare il DIV per uno SPAN ... Non è una soluzione così raccomandabile ma veloce = P =)
So che questo non è il metodo migliore, ma non sono riuscito a capirlo senza incasinare posizioni di intestazione, menu, ecc. Quindi .... ho usato una tabella per quelle due colonne. Era una soluzione VELOCE. Nessun JS necessario;)
