[英]How to make div scale to 100% of browser width?
<div id="sidebar">sidebar</div>
<div id="content">content</div>
側邊欄的固定寬度為100px。 如何將內容寬度設置為瀏覽器寬度的100%?
你可以用簡單的CSS做到這一點:
#sidebar {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
更新了wrapper
div:
HTML
<div id="wrapper">
<p>wrapper</p>
<div id="sidebar">sidebar</div>
<div id="content">content</div>
<p>wrapper</p>
</div>
CSS
* {
/* reset */
margin: 0;
padding: 0;
}
html,
body {
/* for demo purposes only */
height: 100%;
}
#wrapper {
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 100%;
}
#sidebar {
float: left;
width: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.6);
height: 50%;
}
#content {
margin-left: 100px;
/* for demo purposes only */
background: rgba(200, 200, 200, 0.9);
height: 50%;
}
工作示例: http : //jsfiddle.net/kboucher/FK2tL/
你必須像我們其他人一樣玩寬度%:
#content {
background: green;
float: left;
width: 75%;
}
我還考慮根據盒子模型添加寬度為100%的父div。
只需將您的#content屬性更改為:
#content {
background: green;
float: left;
width: 100%;
margin-right: -200px;
}
所以我們根據需要設置100%寬度,但是偏移其他兩個DIV的寬度。 我從CSS Zen Garden學到了這個技巧。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.