1

私は多くの投稿を調べましたが、まだこれを機能させることができません...

私の目標は、CSS のみ (javascript なし) のスタイルを設定して、DIV クラスの高さ「2」が常に DIV クラスの「コンテナー」に収まるようにすることです。

コンテナー DIV の高さは、ウィンドウのサイズ変更のように変更される可能性があるため、「2 つの」DIV のサイズをそれに応じて変更できるようにしたいと考えています。ここではコンテナ DIV の高さを 300px に設定していますが、500px などの任意の px にすることができます。

さらに明確にする必要がある場合はお知らせください。前もって感謝します！

http://jsfiddle.net/pn9Qa/

HTML

<div class='container'>
    <div class='top'>some text</div>
    <div class='bottom'>
        <div class='one'>header</div>
        <div class='two'>items here</div>
    </div>
</div>

CSS

.container
{
    height: 300px;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 60px;
    width: 100%;
    background-color:pink;
    float:left;

}
.bottom
{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.one
{
    width: 100%;
    height: 30px;
    background-color: orange;
}
.two
{
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}
4

3 に答える 3

5

を使用したものを次に示しcalc()ます。

width: -webkit-calc(100% - 60px); /* note, the space is necessary */

ここに使用するものがありますdisplay: flex

display: -webkit-flex;
-webkit-flex-direction: column;

padding/margins と z-index を使用したものを次に示します。

box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;

次に、古いバージョンの自分で計算を行います。

使用されるプレフィックスの簡潔さ。必要なものを確認する必要がある場合は、http://caniuse.com/を使用してください。

于 2013-07-31T21:30:02.440 に答える
0

これが必要ですか: http://jsfiddle.net/pn9Qa/1/

html, body { height: 100%; }

.container
{
    height: 100%;
    width: 100%;
    border: 3px solid red;
}
.top
{
    height: 100%;
    width: 100%;
    background-color:pink;
    float:left;

}
.bottom
{
    width: 100%;
    height: 100%;
    background-color: green;
    float: left;
}
.one
{
    width: 100%;
    height: 30px;
    background-color: orange;
}
.two
{
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}
于 2013-07-31T21:23:56.277 に答える