-2 
<div id="main" style="height: 100%">
    <div id="content">
    </div>
    <div id="toolbar" style="height: 50px">
    </div>
</div>

したがって、maindiv のサイズが変更され、toolbar高さが固定され、高さが = - 50pxcontentになるはずです。height of mainスタイルのみを使用して (JavaScript を使用せずに) どうすればこれを行うことができますか?

4

1 に答える 1

12

めちゃくちゃですよね？心配しないでください。あなたの質問は今も昔も有効です。質問に答えることに集中しましょう。

自由に 3 つの例を作成しました1 :

きちんと説明できるか見てみましょう。

1残念ながら、新しい CSS3 プロパティに従ってサイズ変更可能にすることはできませんでしたresize。

説明

そこで、基本的に 100% の高さのラッパーを使用し、一定の高さの値に対応する負のマージンと正のパディングを与える古い手法を使用しました。負のマージンと正のパディングを組み合わせると、高さが固定されたコンテンツと同じ高さの空きスペースができます。

.container{
    height: 400px;
}

.wrapper{
    height: 100%;
    margin-top: -50px;
    padding-top: 50px;
}

.content{
    height: 100%;
}

.fixed_content{
    height: 50px;
}

技術的には、修正されたコンテンツはラッパーから「押し出されます」が、ラッパーにはその要素を調整する負のマージンがあるため、通常の流れのように見えます。

よりよく示すために、私はこの絵を描きました。

デモンストレーション

多少の調整を加えれば、同じことを水平方向にも実行できることに注意してください。

.container{
    width: 400px;
    height: 400px;
}

.wrapper{
    height: 100%;
    width: 100%;
    padding-left: 50px;
    margin-left: -50px;
    white-space:nowrap;
}

.content{
    height: 100%;
    width: 100%;
    display: inline-block;
}

.fixed_content{
    height: 100%;
    width: 50px;
    display: inline-block;
}

原則として、同じように機能します。主な違いは、オーバーフローが水平方向に配置されるように、インライン要素を同じ行に「強制」する必要があることです。とを使用してそれをwhite-space: no-wrap;行いますdisplay: inline-block;

これは私が描いた水平方向の等価物を示す図です。 デモンストレーション2

可能性は無限大！すべての固定要素の高さ/幅の合計がわかっている限り、さらに要素を追加できます。

テーブルレイアウトは弱虫向けです。すべてのクールなプログラマーはdivs を使用します。;)

最初の例| コード

HTML

<div class='container'>
    <div class='node_1'>
        <div class='wrapper'>
            <div class='node_1_1'>
                <div class='wrapper_2'>
                    <div class='node_1_1_1'></div>
                    <div class='node_1_1_2'></div>
                </div>
            </div>
            <div class='node_1_2'></div>
        </div>
    </div>
</div>

CSS

div{
   -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.node_1{
    border: 2px solid gray;
    height: 100%;
}

.wrapper{
    padding: 52px 0 0 0;
    margin-top: -52px;
    height: 100%;
}

.node_1_1{
    border: 2px solid purple;
    height: 100%;
}

.node_1_2{
    height: 50px;
    border: 2px solid #b80808;
    margin-top: 2px;
}

.wrapper_2{
    padding: 152px 0 0 0;
    margin-top: -152px;
    height: 100%;
}

.node_1_1_1{
    border: 2px solid green;
    height: 150px;
}

.node_1_1_2{
    border: 2px solid orange;
    height: 100%;
    margin-top: 2px;
}

2 番目の例| コード

HTML

<div class='container'>
    <div class='wrapper'>
        <div id="content"></div>
        <div id="toolbar"></div>
    </div>
</div>

CSS

div{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.wrapper{
    height: 100%;
    padding: 52px 0 0 0;
    margin-top: -52px;
}

#content{
    height: 100%;
    border: 2px solid green;
}

#toolbar{
    height: 50px;
    border: 2px solid orange;
    margin-top: 2px;
}

3 番目の例| コード

HTML

<div class='container'>
    <div class='wrapper'>
        <div id="content"></div>
        <div id="vert-toolbar"></div>
    </div>
</div>

CSS

div{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
}

.container{
    border: 2px solid red;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.wrapper{
    height: 100%;
    width: 100%;
    padding: 0 52px 0 0;
    margin: 0 -52px 0 0;
    white-space:nowrap; /*Force elements to stay on horizontal plane*/
}

#content{
    height: 100%;
    width: 100%;
    border: 2px solid green;
    display: inline-block;
}

#vert-toolbar{
    height: 100%;
    width: 50px;
    border: 2px solid blue;
    display: inline-block;
    margin-left: -2px; /*For the borders (2+2 = 4, -2 for a 2px "padding"*/

}
于 2012-04-10T15:47:05.010 に答える