180

さまざまなブラウザーで 100% 最小の高さの要素を作成する最良の方法は何ですか?

header特に、とfooterが固定されたレイアウトがある場合はheight、

真ん中のコンテンツ部分が、下部に固定されている100%間のスペースを埋めるにはどうすればよいですか?footer

4

14 に答える 14

117

私は次のものを使用しています: CSS レイアウト - 100% 高さ

最小高さ

このページの #container 要素の min-height は 100% です。そうすれば、コンテンツがビューポートが提供するよりも高い高さを必要とする場合、#content の高さによって #container も長くなります。#content の可能な列は、#container の背景画像で視覚化できます。div は表のセルではなく、そのような視覚効果を作成するために物理的な要素は必要ありません (またはしたくありません)。まだ納得していない場合。直線や単純な配色ではなく、ぐらついた線やグラデーションを考えてください。

相対位置

#container には相対的な位置があるため、#footer は常にその下部にあります。上記の min-height は #container のスケーリングを妨げないため、これはたとえ #content が #container を長くすることを強いる場合でも (または特にそうである場合) 機能します。

パディングボトム

通常のフローではなくなったため、#content の padding-bottom は、絶対 #footer 用のスペースを提供するようになりました。このパディングはデフォルトでスクロールされた高さに含まれているため、フッターが上記のコンテンツと重なることはありません。

テキストのサイズを少し拡大するか、ブラウザー ウィンドウのサイズを変更して、このレイアウトをテストします。

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

私にとってはうまくいきます。

于 2008-08-24T18:12:21.007 に答える
30

カスタムの高さをどこかに固定するには:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}
<div id="outerbox">
  <div id="innerbox"></div>
</div>

于 2011-03-30T12:06:56.227 に答える
15

kleolb02 の答えはかなり良さそうです。別の方法は、スティッキー フッターとmin-height ハックの組み合わせです。

于 2008-08-27T18:29:38.413 に答える
6

min-height親ノードを継承しながらパーセンテージで正しく動作させるにはmin-height、親ノードの高さをに設定する1pxと、子ノードmin-heightが正しく動作します。

デモページ

于 2013-08-28T11:33:22.413 に答える
6

純粋なCSS解決策 ( #content { min-height: 100%; }) は多くの場合で機能しますが、すべての場合では機能しません。特に IE6 と IE7 ではそうです。

残念ながら、目的の動作を得るには JavaScript ソリューションに頼る必要があります。これは、コンテンツの目的の高さを計算し、<div>それを関数の CSS プロパティとして設定することで実行できます。

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

次に、この関数をonLoadイベントonResizeのハンドラーとして設定できます。

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>
于 2008-09-03T23:41:08.687 に答える
3

サイドバーがあり、フッターに合わせてスペースを埋めたい場合、親コンテナーが100％に設定されているため、Levikに同意します。それらは親の高さの100％になるため、それらを100％に設定することはできません。これは、clear 関数を使用するとフッターが押し下げられることを意味します。

たとえば、ヘッダーの高さが 50px、フッターの高さが 50px で、コンテンツが残りのスペース (たとえば 100px) に自動調整され、ページ コンテナーがこの値の 100% である場合、その高さは 200px になります。次に、サイドバーの高さを 100% に設定すると、ヘッダーとフッターの間にぴったり収まるはずなのに、200px になります。代わりに、50px + 200px + 50px になり、サイドバーがページ コンテナーと同じ高さに設定されるため、ページは 300px になります。ページの内容に大きな空白ができます。

私は Internet Explorer 9 を使用しています。これは、この 100% メソッドを使用したときに得られる結果です。他のブラウザで試したことはありませんが、他のオプションのいくつかで動作する可能性があると思います。しかし、それは普遍的ではありません。

于 2012-04-18T05:07:53.047 に答える
3

最初にdivの後にdivwithを作成し、次に単純にこれを行う必要があります。id='footer'content

HTML は次のようになります。

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

そしてCSS：

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}
于 2012-10-12T09:45:50.230 に答える
2

これを試して：

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

content div の下のdiv要素にはclear:both.

于 2010-04-21T16:09:51.220 に答える
1

これを試すことができます: http://www.monkey-business.biz/88/horizo​​ntal- zentriertes-100-hohe-css-layout/ これは 100% の高さと水平方向の中央です。

于 2010-01-07T07:49:03.033 に答える
0

私が使用したものを共有するだけで、うまく機能します

#content{
        height: auto;
        min-height:350px;
}
于 2011-07-29T07:44:23.373 に答える
0

Afshin Mehrabani の回答で述べたように、body と html の高さを 100% に設定する必要がありますが、そこにフッターを表示するには、ラッパーの高さを計算します。

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}
于 2014-01-12T20:03:57.143 に答える