6

HTML

<div class="container">
    <div class="header">
        <span>
            <span>First</span>
        </span>
        <span>
            <span>Second</span>
        </span>
        <span class="active">
           <span>Thrid</span>
        </span>
    </div>
    <div class="body">
        <div class="Control1">
            Content!
        </div>
    </div>
</div>

CSS

.container
{
    height: 300px;
    border: black 1px solid;
}

.container > .header
{
    background: grey;
}
.container > .header > span
{
    display: inline-block;
    padding: 10px;
}
.container > .header > .active
{
    background: black;
    color: white;
}

.container > .body
{
    height: 100%;
    overflow: auto;
    background: lightgrey;
}

http://jsfiddle.net/ytg8S/

ここで私の問題は、高さが 300 ピクセルのコンテナー div があり、高さが不明なヘッダーがあることです (項目の数と画面サイズによっては、複数行になる可能性があります)。 .body に残りのスペースを占有させ、スペースよりも多くのコンテンツがある場合はスクロールを表示しますか??

私の最初のアイデアは、絶対配置をいじることでしたが、.header項目の行が複数ある場合はうまくいきませんでした..

サードパーティのコンポーネントによって生成された html を変更することはできません (変更することはできますが、大変な作業になります)。

4

2 に答える 2

0

私があなたの質問を正しく理解しているなら、これはあなたが望むことをするだろうと思います：

container > .body
{
    height: 100%;
    max-height:100%;
    overflow: auto;
    background: lightgrey;
}
于 2013-02-07T12:16:13.030 に答える
0

これを試してください..これが役立つことを願っています

   .container
{
    height: 300px;
    border: black 1px solid;
    background: #D3D3D3;
}

.container > .header
{
    height:auto;
    background: grey;
    max-height: 200px;
    overflow: auto; 
}
.container > .header > span
{
    display: inline-block;
    padding: 10px;
}
.container > .header > .active
{
    background: black;
    color: white;
}

.container > .body
{
    height: auto;
    max-height: 100px;
    overflow: auto;
    background: lightgrey;
}
于 2013-02-07T12:59:36.717 に答える