Wie erzwinge ich einen DIV-Block zum Ende einer Seite zu verlängern, auch wenn es keinen Inhalt hat?
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
In der Markup unten, ich versuche den Inhalt div zu erhalten, die unten auf der Seite des ganzen Weg zu strecken, aber es ist Stretching nur, wenn es Inhalt ist anzuzeigen. Der Grund, warum ich dies tun wollen ist, so dass die vertikale Grenze erscheint unten noch die Seite, auch wenn es keine Inhalte angezeigt werden soll.
Hier ist mein 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>
Und meine 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;
}
Lösung
Ihr Problem ist nicht, dass der div nicht auf 100% Höhe ist, aber dass der Behälter um ihn herum ist not.This im Browser hilft, ich vermute, Sie verwenden:
html,body { height:100%; }
Sie können benötigen Polsterung und Margen als auch anpassen, aber das wird Ihnen 90% der Art und Weise erhalten there.If Sie es mit allen Browsern arbeiten müssen Sie mit ihm herumspielen etwas haben wird.
Diese Seite hat einige hervorragende Beispiele:
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
Ich empfehle gehen aber auch auf http://quirksmode.org/
Andere Tipps
Ich werde versuchen, die Frage direkt im Titel zu beantworten, anstatt versessen ist eine Fußzeile auf die unten auf der Seite auf kleben.
Make div auf den unteren Rand der Seite zu verlängern, wenn es nicht genug Inhalt der verfügbaren vertikalen Browser Ansichtsfenster zu füllen:
Demo an (ziehen Sie den Rahmengriff sehen Effekt): http://jsfiddle.net/NN7ky
(. Upside: sauber, einfach Nachteil: erfordert 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 - oder ich bin einfach zu müde
Versuchen Sie das Spiel mit der folgenden CSS-Regel:
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
Ändern Sie die Höhe Ihrer Seite anpassen. Höhe wird zweimal für Cross-Browser-Kompatibilität erwähnt.
Sie können ein bisschen hacken sie mit dem min-height Erklärung
<div style="min-height: 100%">stuff</div>
Ryan Fait der "Sticky Footer" Lösung,
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to -bottom-of-Seite /
Arbeiten über IE, Firefox, Chrome, Safari und Opera angeblich zu, aber haben das nicht getestet. Es ist eine großartige Lösung. Sehr einfach und zuverlässig umzusetzen.
Die min-height Eigenschaft wird nicht von allen Browsern unterstützt. Wenn Sie Ihre #content verlängern müssen es Höhe ist auf längeren Seiten wird die Höhe Eigenschaft es kurz machen.
Es ist ein bisschen wie ein Hack, aber man könnte eine leere div mit einer Breite von 1 Pixel und eine Höhe von beispielsweise hinzufügen 1000px in Ihrem #content div. Das wird den Inhalt zwingen, mindestens 1000px hoch und immer noch zu erlauben, mehr Inhalt, um die Höhe zu verlängern, wenn nötig
Es ist zwar nicht so elegant wie reine CSS ist, ein klein bisschen Javascript hilft dies erreichen kann:
<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>
Versuchen:
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
Habe es noch nicht getestet ...
Sticky Footer mit fester Höhe:
HTML-Schema:
<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;
}
Ich denke, das Problem nur behoben werden würde machen die html auch 100% füllen, könnte seinen Körper das 100% des html füllt aber html nicht zu 100% des Bildschirms ausfüllt.
Versuchen Sie, mit:
html, body {
height: 100%;
}
Versuchen Sie http://mystrd.at/modern-clean-css-sticky -footer /
Der Link oben ist unten, aber dieser Link https://stackoverflow.com/a/18066619/1944643 ist okay. : 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>
Auch diese Ihnen gefallen könnten: http: // matthewjamestaylor .com / blog / ultimate-2-Säulen-left-menu-pixels.htm
Es ist nicht ganz das, was Sie gefragt, aber es könnte auch Ihre Bedürfnisse anzupassen.
Ich habe nicht den Code, aber ich weiß, dass ich dies tat einmal eine Kombination aus Höhe mit: 1000px und margin-bottom: -1000px; Versuchen Sie das mal.
Je nachdem, wie Ihr Layout funktionierte, könnten Sie weg mit dem Hintergrund auf dem <html> Elemente Einstellung, die immer mindestens die Höhe des Ansichtsfensters.
Es ist nicht möglich, dies mit nur Sheets (CSS) zu erreichen. Einige Browser werden nicht akzeptieren
height: 100%;
als ein höherer Wert als die Sicht des Browserfensters an.
Javascript ist die einfachste Cross-Browser-Lösung, obwohl, wie erwähnt, nicht sauber oder schön ein.
Sie können die „vh“ Längeneinheit für die min-height Eigenschaft des Elements verwenden und seine Eltern. Es unterstützt seit 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;
}
Nicht das Beste noch die beste Umsetzung der größten Standards, aber Sie können den DIV für einen SPAN ändern ... Es ist ein nicht so empfehlenswert, aber schnell fix = P =)
Ich weiß, dass dies nicht die beste Methode ist, aber ich konnte es nicht ohne Unordnung meinen Kopfes herauszufinden, Menü, etc Positionen. So .... Ich habe eine Tabelle für diese beiden Spalten. Es war eine schnelle Lösung. Keine JS benötigt;)
