web-dev-qa-db-ja.com

ブラウザウィンドウの高さに基づく動的な最小高さのdiv

3つのdiv要素があります。1つはヘッダー、1つはフッター、そして中央のコンテンツはdivです。
センターのdivはコンテンツで自動的に拡張する必要がありますが、min-height下部divは常に少なくともウィンドウの下部に到達しますが、長いページでは固定されません。

例えば：

<div id="a" style="height: 200px;">
  <p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
  <p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
  <p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>
viewportcss
32
Bryan

私の jsfiddleの解決策 を探してください、それは csslayout に基づいています

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* needed for container min-height */
}
div#container {
  position: relative; /* needed for footer positioning*/
  height: auto !important; /* real browsers */
  min-height: 100%; /* real browsers */
}
div#header {
  padding: 1em;
  background: #efe;
}
div#content {
  /* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
  position: absolute;
  width: 100%;
  bottom: 0; /* stick to bottom */
  background: #ddd;
}
<div id="container">

  <div id="header">header</div>

  <div id="content">
    content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
  </div>

  <div id="footer">
    footer
  </div>
</div>
26
huston007

これは ryanfait.com のおかげです。実際には非常に簡単です。

コンテンツがウィンドウの高さより短い場合、またはコンテンツがウィンドウの高さより長い場合、コンテンツの下部にフッターをページの下部にフロートするには、次のコードを使用します。

基本的なHTML構造：

<div id="content">
  Place your content here.
  <div id="Push"></div>
</div>
<div id="footer">
  Place your footer information here.
</footer>

注：「#content」および「#footer」divの外側に絶対に配置しない限り、何も配置しないでください
注： '#Push' divは非表示になるため、内部には何も配置しないでください。

そしてCSS：

* {
  margin: 0;
}
html, body {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto !important; /*min-height hack*/
  height: 100%;            /*min-height hack*/
  margin-bottom: -4em;     /*Negates #Push on longer pages*/
}
#footer, #Push {
  height: 4em;
}

ヘッダーまたはフッターをページの幅に広げるには、ヘッダーを絶対に配置する必要があります。
注：ページ幅ヘッダーを追加する場合、＃contentに追加のラッパーdivを追加する必要があることがわかりました。外側のdivは水平方向の間隔を制御し、内側のdivは垂直方向の間隔を制御します。 'min-height：'は要素の本体でのみ機能し、高さにパディングを追加することがわかったため、これを行う必要がありました。

*編集：セミコロンがありません

20
Bryan

_#top_および_#bottom_の高さが固定されている場合、次を使用できます。

_#top {
    position: absolute;
    top: 0;
    height: 200px;
}
#bottom {
    position: absolute;
    bottom: 0;
    height: 100px;
}
#central {
    margin-top: 200px;
    margin-bot: 100px;
}
_

更新

_#central_を縮小したい場合は、次のことができます。

  • 親を背景にした偽物;
  • CSS3を使用します（広くサポートされていないため、ほとんどの場合）calc();
  • または、JavaScriptを使用して_min-height_を動的に追加することもできます。

calc()の場合：

_#central {
    min-height: calc(100% - 300px);
}
_

JQueryを使用すると、次のようになります。

_$(document).ready(function() {
  var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
  $("#central").css("min-height", desiredHeight );
});
_
9
ANeves

ハックやjsは必要ありません。ルート要素に次のルールを適用するだけです：

min-height: 100%;
height: auto;

高さとして2つのうち大きい方を自動的に選択します。つまり、コンテンツがブラウザより長い場合はコンテンツの高さ、そうでない場合はブラウザの高さです。これは標準のCSSです。

2
streaver91

他の場所で述べたように、CSS関数calc（）はここでうまく機能します。現在、ほとんどがサポートされています。次のように使用できます：

.container
{
    min-height: 70%;
    min-height: -webkit-calc(100% - 300px);
    min-height: -moz-calc(100% - 300px);
    min-height: calc(100% - 300px);
}
2
Jahmic

ページのすべてのユーザーの身長を推定する方法がないため、おそらくJavaScriptを作成する必要があります。

0
Merianos Nikos

これをするのは難しいです。

min-height: cssスタイルですが、すべてのブラウザで機能するわけではありません。使用できますが、最大の問題は、90％またはそのような数値（パーセント）に設定する必要があることですが、上下のdivは固定ピクセルサイズを使用しているため、調整できませんそれら。

 var minHeight = $(window).height() -
                 $('#a').outerHeight(true) -
                 $('#c').outerHeight(true));

if($('#b').height() < minHeight) $('#b').height(minHeight);

aとcの高さが固定されていることは知っていますが、後で変更する場合に備えて測定します。

また、私はbの高さを測定しています（結局、小さくしたくないです）が、高さがロードされない画像がそこにある場合は、変化する可能性があるので、注意してくださいそのような。

より安全かもしれません：

$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;">&nbsp;</div>');

これは、正しい高さの要素をそのdivに追加するだけです。これは、それを持たないブラウザでも効果的に最小高さとして機能します。 （要素をマークアップに追加し、そのように要素を追加するのではなく、javascriptを使用して要素の高さを制御することもできます。レイアウトを設計するときに要素を考慮することができます。）

0
Ariel