div枠がfloat要素と重複する

プロジェクトのレイアウトを設計しようとしています。私は左と右に浮かぶ2つのdivコンテナ（leftnavとrightnav）を持っています。私は中央部分を2つに分割しなければならない。 "Mailbar"はその中央地域の上のdivです。問題は、 "mailbar" divにボーダーを適用すると、float divと重なってしまうことです。私はそれが重ならないようにしたい。div枠がfloat要素と重複する

#main { 
 
    margin: 0px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
} 
 
#leftbar { 
 
    float: left; 
 
    width: 250px; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    border-right: 1px solid black; 
 
} 
 
#rightbar { 
 
    float: right; 
 
    width: 250px; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    border-left: 1px solid black; 
 
} 
 
#mailbar { 
 
    width: 100%; 
 
    height: 50%; 
 
    border-bottom: 1px solid black; 
 
}

<body> 
 
    <div id="main"> 
 
    <div id="leftbar"> </div> 
 

 
    <div id="rightbar"> </div> 
 

 
    <div id="mailbar"> </div> 
 
    </div> 
 
</body>

出典

2016-12-21 Shivam Mitra

???彼は浮動小数点を使用していない –

あなたのスニペットに問題を表示させることができますか？ – connexo

なぜ％で試してみませんか？ :) Look：https://jsfiddle.net/3jjpasum/2/ – Troyer

あなたは、navbarsの幅を定義mailbarに残り％とmargin-leftとしてmailbarに左navbarの幅を追加するために％を使用することができます。例えば

：

https://jsfiddle.net/3jjpasum/2/

#main { 
    margin:0px; 
    height:150px; 
    border:1px solid black; 
} 
#leftbar { 
    float:left; 
    width: 15%; 
    height:100%; 
    overflow-y: auto; 
    border-right: 1px solid black; 
} 

#rightbar { 
    float:right; 
    width:15%; 
    height:100%; 
    overflow-y: auto; 
    border-left: 1px solid black; 
} 
#mailbar { 
    margin-left: 15%; 
    width:70%; 
    height:50%; 
    background-color: red; 
    border-bottom: 1px solid black; 
}

出典

2016-12-21 13:08:20 Troyer

迅速かつ信頼性の高い答えのために+1票。私は 'margin-left：15％'が 'float：left;'よりも優れているとは思っていません。 –

@KirankumarDafdaさん、ありがとうございました、 '浮動小数点：left'も仕事をやっています、個人的に私はサイドバーの正確な％ – Troyer

はい、そうです。すべての開発者は、独自の選択肢とスタイルを持っています:) –

は次のようにしてみてください：子divのための使用box-sizing:border-box;。真ん中のdiv

#main { 
     margin: 0px; 
     height: 150px; 
     border: 1px solid black; 
    } 
    #leftbar { 
     float: left; 
     width: 250px; 
     height: 100%; 
     overflow-y: auto; 
     border-right: 1px solid black; 
     box-sizing:border-box; 
    } 
    #rightbar { 
     float: right; 
     width: 250px; 
     height: 100%; 
     overflow-y: auto; 
     border-left: 1px solid black; 
     box-sizing:border-box; 
    } 
    #mailbar { 
     width: calc(100% - 500px); 
     float:left; 
     height: 50%; 
     border-bottom: 1px solid black; 
     box-sizing:border-box; 
    }

出典

2016-12-21 13:10:36

ためとcalcあなたは、この場合のように、コンテナを固定している場合。ポジションアブソリュートを使うことができます。

以下の例を参照してください。

#main { 
 
\t margin:0px; 
 
\t height:150px; 
 
     position:relative; 
 
\t border:1px solid black; 
 
} 
 
#leftbar { 
 
\t float:left; 
 
\t width:250px; 
 
\t height:100%; 
 
     position:absolute; 
 
     left:0; 
 
     top:0; 
 
\t overflow-y: auto; 
 
\t border-right: 1px solid black; 
 
} 
 

 
#rightbar { 
 
\t width:250px; 
 
\t height:100%; 
 
     position:absolute; 
 
     right:0; 
 
     top:0; 
 
\t overflow-y: auto; 
 
\t border-left: 1px solid black; 
 

 
} 
 
#mailbar { 
 
    
 
     left:250px; 
 
     right:250px; 
 
\t position:absolute; 
 
     border-bottom:1px solid #000; 
 
     height:50%; 
 
}

<body> 
 
<div id = "main"> 
 
<div id = "leftbar"> 
 
</div> 
 

 
<div id = "rightbar"> 
 
</div> 
 
<div id="mailbar"></div> 
 
</div> 
 
</body>

出典

2016-12-21 13:11:46

width: 100%;を取り外し、#mailbarためoverflow: auto;を追加します。それが動作する方法@troyer

#main { 
 
    margin: 0px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
} 
 
#leftbar { 
 
    float: left; 
 
    width: 250px; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    border-right: 1px solid black; 
 
} 
 
#rightbar { 
 
    float: right; 
 
    width: 250px; 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    border-left: 1px solid black; 
 
} 
 
#mailbar { 
 
    /*width: 100%;*/ 
 
    height: 50%; 
 
    border-bottom: 1px solid black; 
 
overflow: auto; 
 
}

<body> 
 
    <div id="main"> 
 
<div id="leftbar"> </div> 
 

 
<div id="rightbar"> </div> 
 

 
<div id="mailbar"> </div> 
 
    </div> 
 
</body>

出典

2016-12-21 13:14:17

div枠がfloat要素と重複する

答えて

関連する問題