0 
<div id="main" style="overflow:hidden;height:80%;>
    <div id="header">
    </div>
    <div id="content" style="overflow:hidden;">
    </div>
</div>

メイン div に 2 つの div があり、コンテンツ div でメイン div の残りを埋めたいのですが、詰め込まれた高さを超えてコンテンツ div がいっぱいになった場合、コンテンツ div を大きくしたくありません。背が高い。

このような他のスタックオーバーフローの質問を見たことがありますが、どれもうまくいきませんでした。試してみました: DIV をページの残りの部分を垂直方向に埋めますか? 、CSS Div を取得して利用可能な高さを埋める、およびブラウザー ウィンドウの残りの垂直スペースを DIV で埋める方法は?

主な違いは、コンテンツ div をいっぱいにする必要があることですが、オーバーフローしないこともあると思います。これはcssだけで可能ですか？

更新:私はさまざまなコードを試し続けましたが、これが私が望むものです: http://jsfiddle.net/zXnnp/。しかし、何らかの理由で、ローカルホストで複製できませんでした。そして、それはhttp://jamesflorentino.github.io/nanoScrollerJS/を使用していたことが原因であることがわかりました。そして、何らかの理由でコンテンツ div の class="nano" がめちゃくちゃになってしまいました。何が悪いのかはまだ調査中です。

Update2: class="nano" has height:100%; だから私は height:auto; でそれをオーバーライドしました。そして今は大丈夫です。助けてくれてありがとう！

4

4 に答える 4

0

次のようなことができます。

/* stretch the body to full height */
body, html {
    height: 100%;
}

/* stretching the containers */
#header {
     height: 50px; /* just a random number i chose, not sure what you wanted here */   
}
#content {
    height: 100%;
    margin-bottom: -50px; /* same as the header height, but negative */
}

ここでコードの動作を確認できます: http://jsfiddle.net/mRK24/

魔法は、最初に体をビューポートの高さに伸ばすことにあります。#main はビューポートの高さの 80% になります。次に、ヘッダーの高さを固定し、コンテンツの高さを 100% に設定し、ヘッダーの高さと同じ負の余白を下に設定します。

が原因で、コンテンツの一部が失われることに注意してくださいoverflow:hidden;。奇妙なことに、ユーザーのビューポートの高さがわからないため、どれだけの高さかわかりません。おそらく、コンテンツのオーバーフローをスクロールするように設定することを検討する必要があります。コンテンツの一部を非表示にしたいと思うとは思えないからです。

于 2013-04-25T19:34:44.657 に答える
0

続けoverflow:hiddenて<div id="#main">、オーバーフローの制限なしで、コンテンツ div が必要なだけの高さを取るようにします。の中に収まりきらない高さになると、#mainは切り取られます。#content#main

于 2013-04-25T19:45:23.290 に答える