5

これがjsfiddleの例です

html は次のとおりです。

<div class="header">header</div>
    <div class="wrapper">
        <div class="left"><div class="content"></div></div>
        <div class="right">right</div>
    </div>

CSSは次のとおりです。

.left{
position:absolute;
width:30%;
background:red;
left:0;
height:100%;
display:block;
padding:5px;
}
 .right{
overflow:hidden;
background:green;
position:absolute;
right:0;
width:70%;
height:100%;
}

html, body{
min-height:100%;
height:100%;
padding:0px;
margin:0px;
position:relative;
}

body {position:relative;}

.wrapper {
position:relative;
height:100%;
}

.header{
width:100%;
height:100px;
background:yellow;
display:none;
}

.left .content {
background:blue;
height:inherit;
width:100%;
}

赤い div が青い div によって押し出されているのがわかります。どうすればそれを防ぐことができますか? すべての幅と高さは % に基づいています。私が知っている唯一の方法は、赤い div に固定幅を与えることです。% で実行できる他の方法はありますか?

4

3 に答える 3

6

ボックスサイジングを使用したい場合は、この更新された例を参照してください: http://jsfiddle.net/Lca5c/1/

CSS は次のようになります。

.left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    height:100%;
    display:block;
    padding:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

押し出された理由は、div に追加したパディングが原因です。ブラウザの互換性 (こちら) を確認して、要件に一致するかどうかを確認してください。

于 2013-03-12T09:33:44.193 に答える
5

私はそれが古い投稿であることを知っています。最善の解決策は、追加することです

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

あなたの外箱にあるものであなたの要素に。

これは、div、textarea、input、select、または HTML のその他の要素で行うことができます。

于 2015-05-14T12:30:14.793 に答える
1

最も簡単な方法は、.left からパディングを削除し、パディングを .content に追加すると同時に、.content から幅を削除して、デフォルトで自動幅にすることです。

そうすることで、必要な正しい動作が得られ、CSS3 ボックスのサイズ変更方法に依存しなくなります。

さらに、DIV に display:block を指定する必要はありません。これがデフォルトの表示プロパティであるためです。

.left{
    position:absolute;
    width:30%;
    background:red;
    left:0;
    height:100%;
}

.left .content {
    background:blue;
    height:inherit;
    padding:5px;
}
于 2013-03-12T09:49:55.597 に答える