2

重複の可能性:
CSS - 高さのパーセンテージ

3 つの div の中間の div を使用可能なスペースの 100% に収めることができません。

<body>
<div id="container">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</div>
</body>

私のCSSは次のとおりです。

html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
}
#container {
    height: 100%;
    width: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
    background: #F60;
}
#footer {
    height: 75px;
    width: 100%;
    background: #060;
}

中央の div は実際には 100% ですが、使用可能なスペースに適合していません。

次のようなことをしています: 画面が 500px の場合

30px
100% (500px)
30px

私が必要とするのは：

30px
100% (460px)
30px

これはJavaScriptを使わなくても可能ですか？

どうもありがとう

編集:
申し訳ありませんが、ヘッダー、ミドル、フッターの 3 つの要素がある高さを意味していました。ヘッダーとフッターの高さは固定されていますが、使用可能なすべてのスペースに中央を合わせたい

他のスタックオーバーフローの質問に基づいて別の解決策を見つけました:

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    border: 0;
}
#header
{
    height: 100px;
    background:#C60;
}

#container
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
    background:#096;
}

#footer
{
    height: 100px; /*Push must be same height as Footer */
    background:#C60;
}

HTML

<body>
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
</div>
<div id="footer"> </div>
</body>
4

3 に答える 3

3

このjsfiddleのようなものを試してください。

html

<body>
    <div id="wrap">
<div id="container">
    <div id="header">header
    </div>
    <div id="content">qweW
    </div>
</div>
</div>
    <div id="footer">footer
    </div>
</body>

CSS

* { margin: 0; padding: 0 }
html, body {
    margin: 0;
    padding: 0;
    border:1px;
    vertical-align:top;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
    height: 100%;
    background: #F60;
}
#container {
    width: 100%;
    padding-bottom: 75px;
}
#wrap {min-height: 100%;}
#header {
    height: 100px;
    width: 100%;
    background: #069;
}
#content {
    height: 100%;
    width: 100%;
}
#footer {
    position: relative;
    margin-top: -75px;
    clear:both;
    height: 75px;
    width: 100%;
    background: green;
}

HTML を微調整して、「コンテナー」div の周りに「ラッパー」を追加し、「フッター」を両方から移動しました。

于 2012-06-29T15:21:50.373 に答える
1

あなたは絶対にdivを配置することができます：

<body>    
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
</body>

と

#header {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    height: 100px;
    background: #069;
}
#content {
    position:absolute;
    top: 100px;
    bottom: 75px;
    left:0px;
    right:0px;
    background: #F60;
}
#footer {
    position:absolute;
    bottom: 0px;
    height: 75px;
    left:0px;
    right:0px;
    width: 100%;
    background: #060;
}
于 2012-06-29T15:15:49.803 に答える
1

そのような応答性を実現するために「display:flexbox」をいじるのは良い考えだと思います。ここにそれについての良い記事があります。

于 2012-06-29T15:32:28.050 に答える