12

この質問は、さまざまな形で何億回も回答されているようですが、私にとって有効な回答はまだ見つかりません。簡単に言えば、私はこのレイアウトを持っています：

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="body"></div>
        <div class="footer"></div>
    </div>
</body>

wrapperブラウザーの水平方向の中央に配置し、ブラウザーの高さの 100% を埋めたいと思っています。囲まれた各<div>要素の高さは固定されており、その高さの合計がブラウザ ウィンドウの高さよりも大きくなることがよくあります。この場合、必要なレイアウトが得られます。

ただし、ブラウザ ウィンドウの高さが、囲まれた<div>要素を合わせた高さよりも大きい場合 (たとえば、iMac または縦向きの iPhone の場合のwrapperように) footer、この下のウィンドウは<body>背景です。wrapper背景と背景の<body>色が違うので、これが事実であることは明らかです。

wrapperこの高さがコンテンツの合計高さよりも大きいか小さいかに関係なく、ブラウザの高さを埋めるように、これに対する CSS ソリューションを持っている人はいますか?

編集：答え：

答えは、以下の答えと私がちょうど今遭遇したことの組み合わせでした: CSS で、これを行います:

body, html {
    height:  100%;
    margin:  0px auto;
    padding: 0px auto;
}

.wrapper {
    height:     auto;       /* These two lines were the key. */
    min-height: 100%
    /*overflow:   hidden;*/ /* Do not use this, it crops in small browsers. */
    margin:     0px auto;
    padding:    0px auto;
 }
4

3 に答える 3

12

div の高さを 100% に設定する場合は、html と body の高さも 100% に設定する必要があります。次に、div に 100% を追加できます。

CSS

.wrapper {
border: 1px solid red;
height: 100%;
margin: 0px auto;
overflow: hidden;
}

body, html {
height: 100%;
}

このjfiddleを見てください。

于 2013-09-09T09:09:21.550 に答える
1

ビューポートの高さを 100% 埋める要素が必要な場合は、次のものが必要です。

body, html {
  height: 100%;
}

#wrapper {
  height: 100%;
}
于 2013-09-09T09:08:37.593 に答える
0

ラッパーdivのセンタリング用

body{
   margin:0px;
   padding:0px;
  height:100%;
}
.wraper{
   width:90%;
   margin:0px auto;
  height:100%;
  overflow:hidden
}
于 2013-09-09T09:03:34.517 に答える