5

このjsfiddleの例を見ると：http：//jsfiddle.net/2YbpZ/

sidebarとcontent要素の両方がビューポートの下部まで伸びていることがわかります。これが私が欲しいものです。

ただし、ページを拡大し、ユーザーがスクロールする必要があるコンテンツが与えられた場合：http: //jsfiddle.net/p6qGg/

sidebarおよびdivはcontent、ビューポートの下部で切り取られます。親要素（この場合はビューポート）の高さ全体を参照しているため、これが発生する理由はわかって100%いますが、マークアップを変更して2つの要素を囲むラッパーdivを作成すると、次のようになりmin-height: 100%ます。http：// jsfiddle.net/Lr6k9/

同様に、コンテンツがビューポートに収まらないほど長くない場合、sidebarおよびcontentdivは、高さがまったく割り当てられていないかのように動作します：http: //jsfiddle.net/xsHHv/

だから私の質問は、コンテンツがページから伸びていない場合、sidebarおよびdivをビューポートの高さにするにはどうすればよいですか、または伸びている場合はコンテンツの高さにすることができますか？content

4

1 に答える 1

10

トリックは、要素に巨大な を与えpadding-bottom、対応する負の を与えることmargin-bottomです:

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    overflow: hidden;
}

#sidebar, #content {
    float: left;
    padding-bottom: 999em;
    margin-bottom: -999em;
}

これがあなたのフィドルです：http://jsfiddle.net/Lr6k9/4/

于 2013-01-04T17:59:59.623 に答える