0

このような質問を見たことがありますが、それらは古く、解決策はどれもうまくいきませんでした...

私は単純なhtmlを持っています

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

そして私のCSS

#outer {width: 800px; margin: 30px auto;}
#nav {height: 40px; width: 800px;}
#content {width: 800px;}
#footer {height: 40px; width: 800px;}

コンテンツは独自の高さを選択しているようで、内容に関係なくその高さを維持します。どうすれば ( #content) コンテンツのスペースを埋めることができますか?

4

3 に答える 3

1

#contentheight:autoコンテンツに基づいて高さを設定するデフォルトで設定されています。画面を埋めるのに十分なコンテンツがない場合でも画面の下部に留まるフッターを求めている場合は、ある種の「スティッキー フッター」を使用する必要があります。

Ryan Fait のスティッキー フッターは、私が使った中で最高のものです。

于 2013-03-29T05:34:38.113 に答える
0

またはプロパティを子要素に適用するまで、 の高さは#content自動的に増加します。( を使用している場合) に渡してみてください。これで問題が解決する可能性があります。floatpositionoverflow: auto#contentfloat

または、またはのfloatようなプロパティの代替を使用します。display:inlinedisplay: inline-block

floatの子要素に与えていない場合は、#contentを使用してみてくださいclear: both。

このヒントがお役に立てば幸いです。

于 2013-03-29T05:37:14.780 に答える
0

http://jsfiddle.net/gWdQj/

ナビゲーション バー + コンテンツ + フッターの高さは、常にビューポートの 100% 以上になります。それ以上の場合、この css はそれに応じて高さを自動調整します。

HTML

<div id='outer'>
    <div id='nav'></div>
    <div id='content'>
    <!-- html -->
    </div>
    <div id='footer'></div>
</div>

CSS

html, body, #outer
{
    height:100%;
    border:1px solid black;
}

#nav
{
    height:38px; /* this is an exmple height. Insert your own. */
    border: 1px solid red;
}

#footer
{
    height:48px; /* this is an example height. Insert your own. */
    border:1px solid purple;
}

#content
{
    min-height: calc(100% - 38px - 48px); /* css3 function to calculate content height, which is 100% of parent minus navbar height - footer height */
    min-height: -webkit-calc(100% - 38px - 48px);
    min-height: -moz-calc(100% - 38px - 48px);
}
于 2013-03-29T07:30:42.767 に答える