2

2つのdivをスタックしたdivがあります。

.container {
    position: fixed;
    padding:4px;
    top: 1px;
    left: 1px;
    width:200px;
    height: 200px;
    border: 4px solid #999;
}
.box1 {
    position: relative;
    height: 50px;
    border: 4px solid #f00;
}
.box2 {
    border: 4px solid #00f;
    height: 100%;
    position: relative;
    overflow: auto;
}

<div class='container'>
    <div class='box1'></div>
    <div class='box2'>
        <div style='height:400px;width:10px;background-color:#000;'></div>
    </div>
</div>

DIV1が（特定の選択で拡張するため）必要なスペースに関係なく、DIV2が親divを超えて拡張することを望まず、DIV2をスクロールさせたい。100％の高さで十分だと思いましたが、予想される動作である親divと同じ値に拡張されます。テーブルはこれを行うことができるようですが、私はテーブルを使いたくありません。

次に例を示します（この例では、青いdivは灰色のdivの下部で停止する必要があります）：

http://jsfiddle.net/gateshosting/uJ7Ns/

4

2 に答える 2

2

ワーキングjsfiddle

ボックスの高さを、使用可能な高さから境界線の高さから余白の高さを引いた値に等しく設定します

 box2 {
    border: 4px solid #00f;
    height: 134px;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}
于 2013-03-22T19:32:17.573 に答える
1

残念ながら、純粋な CSS ではこれを行うことはできません。

ただし、Javascript/jQuery を使用できます。

$(function(){
    //this is triggered by resizing the window
    $(window).on("resize", function(){
        $(".box2").height($(".container").height() - $(".box1").height());
    }).trigger("resize"); //this initializes the height
});

CSSを変更する必要があります：

body, html{
    padding:0;
    margin:0;
    height:100%
}

.container{
    height:100%;
    width:200px;
    background: silver;
}

.box1{
    background: pink;
    height:100px;
    position:relative;
}

.box2{
    background: lightBlue;
    overflow:auto;
}

コンテナ要素 (.container、.box1、.box2) のパディングは必要ありません。これは、パディングしている分だけ高さが失われるためです。コンテナ要素にパディングが必要な場合は、高さと幅がずれないように、パディングを使用してコンテンツ内に div を追加する必要があります。

CSS:

.pad {
    padding: 5px;
}

HTML

<div class='box2'>
    <div class="pad">
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
        asdf<br />
    </div>
</div>

ここでウィンドウのサイズを変更してみてください: http://jsfiddle.net/THWMp/3/

于 2013-03-22T19:29:44.863 に答える