div的宽度取所有剩余宽度
[英]Width of div taking all remaining width
问题描述
我想在左侧菜单的右边放一个顶栏。 我把width: 100%我的#top_bar width: 100% ，但是那么大。 我希望我的顶栏只占用屏幕的剩余空间。
HTML：
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
CSS：
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
height: 70px;
width: 100%;
}
结果：
5 个解决方案
解决方案1
1 2015-06-13 09:07:40
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
top: 0px;
left: 200px;
right: 0px;
height: 70px;
}
解决方案2
0 2015-06-13 09:01:20
您可以使用左边距为大div
CSS：
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
background-color: red;
margin-left: 200px;
height: 70px;
}
HTML：
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
工作演示
解决方案3
0 2015-06-13 09:07:12
只需将此添加到您的CSS：
body {
margin: 0;
width: 100%;
overflow: hidden;
}
解决方案4
0 2015-06-13 10:52:55
也许这个 ？ 您只能更改width: 100%到right: 0 。 float: left是不必要的。
html, body { width: 100%; height: 100%; margin: 0; } #menu_left { background-color: #354052; position: fixed; height: 100%; width: 200px; } #top_bar { border-bottom: 1px solid #EFF0F3; position: absolute; background-color: white; left: 200px; right: 0; height: 70px; }
<div id="menu_left"></div> <div id="top_bar"></div>
解决方案5
0 2015-06-13 11:00:37
尝试在元素周围使用100％宽度的容器。
<div class="container">
<div id="menu_left">
</div>
<div id="top_bar">
NAVIGATION
</div>
</div>
看到我刚刚创建的这支笔： http ： //codepen.io/anon/pen/MwodLx
如何设置第一格宽度取决于文本宽度，剩余的全宽将分配给第二格
[英]How to set first div width depends on text width, the remaining full width will be assign to second div
使用getElementById将网站加载到div中而不占用宽度的100％
[英]Loading site with getElementById into a div not taking 100% of width
将div的宽度设置为固定侧边栏的右侧，以保留视口的剩余100％
[英]Set width of div to the right of a fixed sidebar to be the remaining 100% of viewport
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.