DIVブロックにコンテンツがない場合でも、ページの下部まで拡張するにはどうすればよいですか？
https://stackoverflow.com/questions/147528
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
以下に示すマークアップでは、コンテンツdivをページの一番下までストレッチしようとしていますが、表示するコンテンツがある場合にのみストレッチします。これを行う理由は、表示するコンテンツがなくても、ページの下に垂直の境界線が表示されるためです。
こちらが私の 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>
そして私の 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;
}
解決
問題は、divの高さが100％でないことではなく、その周囲のコンテナーがそうでないことです。これは、使用していると思われるブラウザーで役立ちます。
html,body { height:100%; }
パディングとマージンも調整する必要があるかもしれませんが、これにより90％の方法が得られます。すべてのブラウザで動作させる必要がある場合は、少し混乱させる必要があります。
このサイトにはいくつかの優れた例があります：
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
他のヒント
フッターをページの下部に貼り付けるのではなく、タイトルで直接質問に答えようとします。
利用可能な垂直ブラウザビューポートを満たすのに十分なコンテンツがない場合、divをページの下部まで拡張します：
デモ（フレームハンドルをドラッグして効果を確認）： http://jsfiddle.net/NN7ky
（上：クリーン、シンプル。下：フレックスボックスが必要- 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-または私は眠すぎです
次のcssルールを試してみてください：
#content {
min-height: 600px;
height: auto !important;
height: 600px;
}
ページに合わせて高さを変更します。ブラウザ間の互換性のために高さが2回記載されています。
min-height 宣言でハッキングできます
><div style="min-height: 100%">stuff</div>
Ryan Faitの<！> quot; Sticky Footer <！> quot;を試してください。ソリューション、
http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to -bottom-of-page /
IE、Firefox、Chrome、Safari、おそらくOperaでも動作しますが、テストは行っていません。それは素晴らしい解決策です。実装が非常に簡単で信頼性が高い。
min-heightプロパティは、すべてのブラウザーでサポートされているわけではありません。長いページで高さを拡張するために#contentが必要な場合、高さプロパティは短くします。
ちょっとしたハックですが、幅が1pxで高さが空のdivを追加できます。 #content div内の1000px。これにより、コンテンツは少なくとも1000pxの高さになりますが、必要に応じてより長いコンテンツでも高さを拡張できます
純粋なCSSほどエレガントではありませんが、少しのJavaScriptでこれを実現できます。
<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>
試してください：
html, body {
height: 102%;
}
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
.div {
position: absolute;
top: 0;
bottom: 0;
width: 1000px;
min-height: 100%;
}
まだテストしていません...
固定高さのスティッキーフッター：
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;
}
HTMLを100％埋めるだけで問題は解決すると思いますが、 ボディはHTMLの100％を埋めているかもしれませんが、HTMLは画面の100％を埋めていません。
お試しください：
html, body {
height: 100%;
}
http://mystrd.at/modern-clean-css-stickyをお試しください-footer /
上記のリンクはダウンしていますが、このリンク https://stackoverflow.com/a/18066619/1944643 はOK。 ：D
デモ：
<!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>
また、あなたはこれを好むかもしれません： http：// matthewjamestaylor .com / blog / ultimate-2-column-left-menu-pixels.htm
それはあなたが求めていたものではありませんが、あなたのニーズにも合うかもしれません。
コードはありませんが、height：1000pxとmargin-bottom：-1000pxの組み合わせを使用してこれを1回行ったことは知っています。それを試してください。
レイアウトの機能によっては、<html>要素の背景を設定することで逃げる場合があります。これは常に少なくともビューポートの高さです。
スタイルシート（CSS）のみを使用してこれを達成することはできません。一部のブラウザは受け入れません
height: 100%;
ブラウザウィンドウの視点よりも高い値として。
Javascriptは最も簡単なクロスブラウザーソリューションですが、前述のように、クリーンで美しいものではありません。
<！> quot; vh <！> quot;を使用できます。要素自体とその親のmin-heightプロパティの長さの単位。 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;
}
最高の標準の最高の実装でも最高の実装でもありませんが、SPANのDIVを変更できます。これはあまりお勧めできませんが、迅速な修正= P =）
これが最良の方法ではないことはわかっていますが、ヘッダー、メニューなどの位置を台無しにしないと、それを理解できませんでした。だから....私はそれらの2つの列にテーブルを使用しました。それは簡単な修正でした。 JSは必要ありません;）
