私の調査から、これは絶対に古典的なCSSの質問のように見えますが、決定的な答えを見つけることができません。つまり、StackOverflowです。
身長の100％から、固定高のヘッダーとフッターが占める高さを差し引いたものを占めるようにcontent divを設定するにはどうすればよいですか？
<body>
<header>title etc</header>
<div id="content">body content</div>
<footer>copyright etc</footer>
</body>
//CSS
html, body {
height: 100%;
}
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: 100% of the body height, minus header & footer
}
私は純粋なCSSを使用し、その答えがブラウザー間で防弾になるようにしたいと思います。
このバージョンは、すべての最新のブラウザーと、modernizrスクリプトを使用している場合はie8で動作します（変更headerしfooterてdivsに変更するだけではない場合）。
html,
body {
min-height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
padding: 50px 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#content {
min-height: 100%;
background-color: green;
}
header {
margin-top: -50px;
height: 50px;
background-color: red;
}
footer {
margin-bottom: -50px;
height: 50px;
background-color: red;
}
p {
margin: 0;
padding: 0 0 1em 0;
}<div id="wrapper">
<header>dfs</header>
<div id="content">
</div>
<footer>sdf</footer>
</div>コンテンツ付きスクロール： フィドル
クロスブラウザソリューションでない限り、それを達成するためにを使用calc(expression)することを利用できるかもしれません。
html, body {
height: 100%;
}
header {
height: 50px;
background-color: tomato
}
#content {
height: -moz-calc(100% - 100px); /* Firefox */
height: -webkit-calc(100% - 100px); /* Chrome, Safari */
height: calc(100% - 100px); /* IE9+ and future browsers */
background-color: yellow
}
footer {
height: 50px;
background-color: grey;
}
あなたがあなたについてもっと知りたいならば、このサイトcalc(expression)を訪問したほうがよいでしょう。
私がこの質問への答えを見つけようとしていたとき、これはまだトップのグーグル結果として出てきました。プロジェクトで古いブラウザをサポートする必要はありませんでした。flex-boxでより優れた、よりシンプルなソリューションを見つけたように感じます。以下のCSSスニペットが必要なすべてです。
また、画面の高さが小さすぎる場合にメインコンテンツをスクロール可能にする方法も示しました。
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
header {
min-height: 60px;
}
main {
flex-grow: 1;
overflow: auto;
}
footer {
min-height: 30px;
}<body style="margin: 0px; font-family: Helvetica; font-size: 18px;">
<header style="background-color: lightsteelblue; padding: 2px;">Hello</header>
<main style="overflow: auto; background-color: lightgrey; padding: 2px;">
<article style="height: 400px;">
Goodbye
</article>
</main>
<footer style="background-color: lightsteelblue; padding: 2px;">I don't know why you say, "Goodbye"; I say, "Hello."</footer>
</body>これを行うための新しい最新の方法は、ビューポートの垂直方向の高さからヘッダーとフッターの両方の高さを差し引くことによって垂直方向の高さを計算することです。
//CSS
header {
height: 50px;
}
footer {
height: 50px;
}
#content {
height: calc(100vh - 50px - 50px);
}
ヘッダーとフッターを計算しようとするのは悪いことです:(デザインはシンプルで自明でなければなりません。簡単です。計算は簡単ではありません...人間にとっては簡単ではなく、機械では少し難しいです。
あなたが探しているのは、聖杯のデザインのサブセットです。
これがフレックスディスプレイを使用した実装です。フッターとヘッダーに加えて、サイドバーが含まれています。楽しみ：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
cssプロパティのBoxSizingを利用できます。
#content {
height: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
padding-top: 50px;
margin-top: -50px;
padding-bottom: 50px;
margin-bottom: -50px;
}
JsFiddleを参照してください。
この質問にはかなりよく答えられていますが、私は自由にjavascriptソリューションを追加しています。idを「展開」する要素を指定するだけfooterspacerdivで、このjavascriptスニペットは、ページがブラウザウィンドウの高さ全体を占めるまで、そのdivを展開します。
これは、ページがブラウザウィンドウの全高よりも小さい場合、document.body.scrollHeightがdocument.body.clientHeightと等しいという観察に基づいて機能します。whileループは、footerspacerdivdocument.body.scrollHeightがdocument.body.clientHeightよりも大きくなるまでの高さを増やします。この時点で、footerspacerdiv実際には1ピクセルの高さが高くなり、ブラウザに垂直スクロールバーが表示されます。したがって、スクリプトの最後の行で、の高さをfooterspacerdiv1ピクセル減らして、ページの高さをブラウザウィンドウの高さと正確に一致させます。
ページの「フッター」のすぐ上に配置することfooterspacerdivで、このスクリプトを使用して「フッターをページの下部に押し下げる」ことができます。これにより、短いページでは、フッターがブラウザーウィンドウの下部と同じ高さになります。
<script>
//expand footerspacer div so that footer goes to bottom of page on short pages
var objSpacerDiv=document.getElementById('footerspacer');
var bresize=0;
while(document.body.scrollHeight<=document.body.clientHeight) {
objSpacerDiv.style.height=(objSpacerDiv.clientHeight+1)+"px";
bresize=1;
}
if(bresize) { objSpacerDiv.style.height=(objSpacerDiv.clientHeight-1)+"px"; }
</script>
これは、負のマージンまたはを使用しないソリューションですcalc。以下のスニペットを実行して、最終結果を確認してください。
説明
ヘッダーとフッターの高さを固定30pxし、それぞれ絶対的に上部と下部に配置します。コンテンツが下に落ちるのを防ぐために、2つのクラスを使用します。below-headerおよびabove-footer上下のdivに。を埋め込みます30px。
すべてのコンテンツはdivでラップされているため、ヘッダーとフッターはウィンドウではなくコンテンツposition: relativeの上部/下部にあります。
クラスを使用fit-to-parentしmin-fit-to-parentて、コンテンツをページに入力します。これにより、少なくともウィンドウと同じくらい低いが、コンテンツがウィンドウより長い場合は非表示になるスティッキーフッターが得られます。
ヘッダーとフッターの内部では、display: tableanddisplay: table-cellスタイルを使用して、ページのシュリンクラップ品質を損なうことなく、ヘッダーとフッターに垂直方向のパディングを提供します。（実際のパディングを与えると、ページの全高がを超える可能性があり、100%実際には必要のないときにスクロールバーが表示されます。）
.fit-parent {
height: 100%;
margin: 0;
padding: 0;
}
.min-fit-parent {
min-height: 100%;
margin: 0;
padding: 0;
}
.below-header {
padding-top: 30px;
}
.above-footer {
padding-bottom: 30px;
}
.header {
position: absolute;
top: 0;
height: 30px;
width: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 30px;
width: 100%;
}
/* helper classes */
.padding-lr-small {
padding: 0 5px;
}
.relative {
position: relative;
}
.auto-scroll {
overflow: auto;
}
/* these two classes work together to create vertical centering */
.valign-outer {
display: table;
}
.valign-inner {
display: table-cell;
vertical-align: middle;
}<html class='fit-parent'>
<body class='fit-parent'>
<div class='min-fit-parent auto-scroll relative' style='background-color: lightblue'>
<div class='header valign-outer' style='background-color: black; color: white;'>
<div class='valign-inner padding-lr-small'>
My webpage
</div>
</div>
<div class='fit-parent above-footer below-header'>
<div class='fit-parent' id='main-inner'>
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
Lorem ipsum doloris finding dory Lorem ipsum doloris finding
dory Lorem ipsum doloris finding dory Lorem ipsum doloris
finding dory Lorem ipsum doloris finding dory Lorem ipsum
doloris finding dory Lorem ipsum doloris finding dory Lorem
ipsum doloris finding dory Lorem ipsum doloris finding dory
</div>
</div>
<div class='footer valign-outer' style='background-color: white'>
<div class='valign-inner padding-lr-small'>
© 2005 Old Web Design
</div>
</div>
</div>
</body>
</html>