9

私はこの問題で立ち往生しています：

2 つの div を含む div (#container) があります。コンテナーの高さは、この div の内容に関係なく、正確に 100% にする必要があります。

この div 内で、2 つの全幅 div を重ね合わせます。

  • (#upper) div のコンテンツは、その高さを自動的に決定します。
  • (#lower) div のコンテンツはスクロール可能である必要がありますが、垂直方向のみです。その高さは (#upper) の高さに依存します: 100% - (#upper)height = (#lower)height

現在、私は次のcssを持っています...

body {
    margin:0;
    padding:0;
    }
#container 
    {
    position: relative;
    width: 500px;
    height: 100%;
    max-height: 100%;
    background-color: #f00;
    }
#upper { 
    width: 100%;
    background-color: #0f0;
    }
#lower {
    width: 100%;
    background-color: #00f;
    overflow: auto;
}

...およびこのコード：

<div id="container">
<div id="upper"></div>
<div id="lower"></div>
</div>

(#container) の高さを正確に 100% にする方法 - その内容とは関係なく? (#upper)と(#lower)を合わせた内容で高さが大きくなる？

どうすれば (#lower) をスクロール可能にできますか (上下のみで、左から右ではありません!)?

フィードバックをお寄せいただきありがとうございます。私たち全員がこれから学ぶことができることを願っています。

4

4 に答える 4

4

htmlおよび要素の高さが 100% になるように設定bodyして、子 div がパーセンテージの基準となるものを認識できるようにする必要があります。そのようです：

html, body {
    height:100%;
    width:100%;
}

コンテナを次のように変更します。

#container 
{
    width: 500px;
    height: 100%;
    background-color: #f00;
}

スクロールの問題については、ほぼ完了です。コードを次のように変更します。

#lower {
    width: 100%;
    height:100px;
    background-color: #00f;
    overflow-y: auto;
}

最適に機能させるには、下位の div に固定の高さを設定すると、スクロール可能なアクションが最適に機能しやすくなります。

編集：

あなたの質問を読み間違えたことに気づきました。下の div でウィンドウの残りの高さを埋めたいとします。jqueryでこれを行う方法は次のとおりです。

var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top); 
$('#lower').height(remaining_height);

私はまだCSSだけでそれを行う方法を見つけていません...悲しいことに。

于 2013-08-18T20:21:29.760 に答える
3

これが役立つと思います：

<head>
    <title></title>
    <style>
        .upper{
            height:50px;
            border: 1px solid groove;
        }
        .lower{
            height:calc(100% - 50px);
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <div style="height:500px; border:1px solid red; position:relative;">
        <div class="upper"></div>
        <div class="lower"></div>
    </div>
</body>

これにより、下位の div から 50px が削除されます

于 2015-10-21T17:03:25.660 に答える
1

純粋な CSS ソリューションの場合は、display: table-row を使用します。

<style>
*{
    box-sizing: border-box;
    margin:0;padding:0;
}
  html, body, #container{
    height: 100%;
}

#container{
    display: table;
    height: 100%;
}

#upper, #lower{
    display: table-row;
}

#upper{
    height: 100px;
}
</style>

<div id="container">
    <div id="upper">bla</div>
    <div id="lower">bla</div>
</div>

このソリューションは、コンテンツの高さが 100% 以下の場合にのみ機能します。こちらを参照してください: https://stackoverflow.com/a/13668087/603569

于 2015-06-09T14:28:47.690 に答える