CSS Div 占据整个剩余宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16529291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div to take up entire remaining width
提问by sublime
I have a parent div and 2 divs inside it. First child div is 50px wide and 100% height. Second child div is 100% height and I it to take rest of the width ( 100% - 50px ) how do I do that?
我里面有一个父 div 和 2 个 div。第一个子 div 宽 50px，高 100%。第二个孩子的 div 是 100% 的高度，我用剩下的宽度（ 100% - 50px ）我该怎么做？
Here is the fiddle that I've created: http://jsfiddle.net/muGty/Basically I want blue div (right ) to occupy rest of the grey container completely.
这是我创建的小提琴：http: //jsfiddle.net/muGty/基本上我希望蓝色 div（右）完全占据灰色容器的其余部分。
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
回答by Mr. Alien
Do you mean like this?
你的意思是这样吗？
<div id="left">
</div>
<div id="right">
</div>
CSS
CSS
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
margin-left: 200px;
background: #0f0;
height: 100%;
}
Update:
更新：
You can also use calc()property in CSS3, which will ease up this process like
您还可以calc()在 CSS3 中使用属性，这将简化此过程，例如
html, body {
height: 100%;
}
#left {
width:200px;
float:left;
background: #f00;
height: 100%;
}
#right {
float: left;
background: #0f0;
height: 100%;
width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}
回答by Half_Baked
Just change your right div to this:
只需将您的右侧 div 更改为：
.right{
float:left;
height:50px;
width: calc(100% - 50px);
background-color: blue;
display:inline-block;
}
回答by ACJ
You could also work with an absolute position for the right side column. Consider this example:
您还可以使用右侧列的绝对位置。考虑这个例子：
.parent{
width:100%;
height:50px;
background:#888;
position:relative
}
.left{
float:left;
height:100%;
width:50px;
background:green
}
.right{
background:red;
position:absolute;
bottom:0;
left:50px;
right:0;
top:0
}
Also see this Fiddle. Note that you would need to set position: relativeon the parent container for this to fly.
另请参阅此Fiddle。请注意，您需要position: relative在父容器上进行设置才能使其飞行。
回答by Daniel A. White
You could add a 50px margin to rightand float it.
您可以添加一个 50px 的边距right并将其浮动。
回答by RelevantUsername
What about editing your right class to make it look like this :
如何编辑您的正确类以使其看起来像这样：
.right{
float:left;
height:50px;
width: 100%;
margin-right:-50px;
background-color: blue;
display:inline-block;
}
