0

このような質問がたくさんあることを私は知っています。しかし、私はまだ解決策を見つけることができませんでした。

フィドルを確認してください：http：//jsfiddle.net/paulocoelho/Yy9Ep/2/

すべての要素は、ブラウザの高さのほぼ100％を占めます（上下の余白もあります）。内部には2つの要素があります。

  • ヘッダー。高さは変化する可能性があります（スクロールできません）
  • 柔軟な領域。高さは親のサイズによって異なり、残りのスペースを取ります（スクロール可能）

コンテンツ領域の高さを手動で設定すると機能しますが、それでは柔軟性が失われます。

これがCSSで、残りはフィドルをチェックします。

.container{
    position:absolute;
    top:50px;
    bottom:10px;
    width:200px;
    background:green;
}

.flexible{
    /*This works but I need the height to be flexible depending on screen size and the natural height of the header */
    /*height:200px;*/
    overflow-y:scroll;
}

編集：

私はこれをJSによって制御されたくないのです。

4

3 に答える 3

2

柔軟な高さのための最善の策はCSSFlexboxです。

http://caniuse.com/#search=flexbox

メインコンテナ要素を設定します。

display: -webkit-box;
display: -moz-box;
display: box;

ただし、すべてのブラウザで十分にサポートされているわけではありません。あなたが知っている、一般的な容疑者...

Flexboxの使用方法を説明する優れたMozillaの記事へのリンクは次のとおりです。

https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

box-orient: vertical特に、屈曲する必要のある子要素の設定に関心があります。box-flex: 1

フレックスボックスで遊んでみてください。CSSも表示されます。

http://flexiejs.com/playground/

これがFlexboxで編集されたjsfiddleです：http：//jsfiddle.net/Yy9Ep/3/

Flexboxモジュールのステータスに関する追加情報：

http://css-tricks.com/old-flexbox-and-new-flexbox/

于 2013-03-07T04:18:45.643 に答える
0

CSS3 標準は、親要素の高さを埋める信頼できる方法を提供していません。高さ:100% を使用することが解決策として提供されることがよくありますが、繰り返しますが、さまざまなブラウザーで一貫してサポートされているわけではありません。いずれにせよ、今日ではこれを行うのは一般的に通用しないと考えられています。

ブロック要素をページまたはコンテナの下部に固定し、中央の領域をスクロールさせたい場合:

<div style"position:fixed; bottom:0;">
于 2013-03-07T04:26:55.610 に答える
0

追加すると思います

height:70%;

トリックを実行します。設定したい正確な量をいじる必要があるかもしれませんが、うまくいくはずです。

ここで確認できます

フィドル

于 2013-03-07T04:23:25.763 に答える