3

OK、この問題について StackOverflow で提供されている多くのソリューションを試しましたが、どれも機能しませんでした。これはトリッキーなことであり、トリッキーな解決策が必要だと思います。

私が見てきたことから、身体を「占有」するという問題はそれぞれ異なるので、私は別の問題を抱えてここにいると思います。

ここで本当に助けが必要です、皆さん。

ここに私の問題があります: http://jsfiddle.net/Ff49Z/5/

そして、私が欲しいのは次のとおりです。「ラッパー」divが本体を満たしていない場合、とにかくdivをその下部まで展開したいです。したがって、フィドルでは、私が達成しようとしているのは、レイアウト上の灰色のスポットではありません。ご覧のとおり、ラッパーは 100% の高さ (この問題に対して SO で提供される一般的なソリューションの 1 つです) であり、これは役に立ちません。

ラッパーに合わせて展開されないのは、この div です。

div#middle {
    padding:10px;
    margin:0 auto;
    height: 100%;
}

ところで、オーバースクロールすると、フッタースティックとラッパースクロールが発生します。これは望ましい動作であり、問​​題なく動作します。

4

3 に答える 3

4

私は単に追加しました：

div#middlewrap {
    width:100%;
    position:absolute;
    margin-top:60px;
}

あなたが尋ねたように動作します。編集：これは間違っています - 以下の正しい答え

cssを一から書き直そうと思ったら諦めかけたところ、思ったより簡単にできました。私はあなたの CSS を骨にまで単純化し、中間のラッパーにクールなものを追加し、ヘッダーとフッターにoverflow-y:auto;甘いものを追加しました。次に、コンテンツ divposition:fixed;のパディングを調整し、body と html に a を追加しました (body のすべての子を に正常に設定できるようにするため)。 #middleheight:100%;height:100%;

body, html {
    margin:0;
    height:100%;
}
div#headerwrap, div#footerwrap {
    position: fixed;
    left: 0;
    right: 0;
}
div#headerwrap {
    top: 0;
    height:64px;
    background-color: red;
}
div#middlewrap {
    height:100%;
    overflow-y:auto;
    background-color: blue;
}
div#middle {
    padding-top:70px;
    padding-bottom:35px;
}
div#footerwrap {
    bottom: 0;
    height:32px;
    background-color: green;
}

必要な CSS はこれだけです。かっこいいでしょ？
HERE IS THE FIDDLE
注: 私はあなたの構文を尊重しましたが、これも正しいですが、CSS のすべての #ID の前に DIV を記述する必要はありません。これらのセレクターを削除すると、大規模なプロジェクトで css ファイルの重量が劇的に減少します。
乾杯。

于 2013-04-15T23:16:17.093 に答える
1

すべての親要素を次のようにしheight:100%ます。

body, html, body>div#middlewrap {
    height: 100%;
}
div#middle {
    min-height:100%;
}
于 2013-04-15T23:30:50.973 に答える
0

CSSだけでは無理。JavaScript が必要です。クライアントの高さ - (ヘッダー + フッター) = コンテンツの最小高さ

親に高さが定義されていないため、% height の使用は機能しません。

于 2013-04-15T23:13:07.000 に答える