如何使左浮动div占用剩余空间的100％？
[英]How do I make a left-floated div take up 100% of the remaining space?
问题描述
If I have a container with 75% width and two columns inside, left and right, with left being 10em in width, how do I get the right container to take up 100% of the space remaining? 
如果我有一个75％宽度的容器，内部，左侧和右侧两列，左侧宽度为10em，我如何获得正确的容器占用剩余空间的100％？
I tried this with no luck: 我试了这个没有运气：
html, body { margin:0; padding:0; width:100%; height:100%; } #container { position:relative; width:75%; margin:0 auto; background:blue; } #left-container { position:relative; float:left; height:100%; width:10em; background:red; } #right-container { position:relative; float:left; height:100%; width:100%; background:yellow; }
<div id="container"> <div id="left-container">Left</div> <div id="right-container">Right</div> </div>
I can do this easily with percentages, but I need left to be a fixed 10em width. 我可以用百分比轻松地做到这一点，但我需要留下固定的10em宽度。
4 个解决方案
解决方案1
9 已采纳 2013-05-01 01:20:01
You can make a box element take up the remainder of the space by removing float: left , removing the width and adding overflow:hidden to the right div 您可以通过删除float: left ，删除width并添加overflow:hidden到右侧 div使框元素占用空间的剩余部分
Working example 工作实例
#right-container {
position:relative;
overflow: hidden;
height:100%;
background:yellow;
}
解决方案2
1 2013-05-01 01:50:06
Another option is to put a left margin on the #right-container div: 另一个选择是在#right-container div上放置一个左边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position:relative;
width:75%;
margin:0 auto;
background:blue;
}
#left-container {
position:relative;
float:left;
height:100%;
width:10em;
background:red;
}
#right-container {
position:relative;
margin-left: 11em;
height:100%;
background:yellow;
}
</style>
</head>
<body>
<div id="container">
<div id="left-container">
Left
</div>
<div id="right-container">
Right
</div>
</div>
</body>
</html>
解决方案3
1 2016-06-12 03:37:21
There are at least 2 options for this kind of problem at this moment (2016) using CSS3, far simpler solutions than the accepted answer, which is kind of a "hack" using overflow:hidden 目前（2016年）使用CSS3至少有两种选择解决这类问题，这是一个比接受的答案简单得多的解决方案，这是一种使用overflow:hidden的“黑客” overflow:hidden
- using
flexbox使用flexbox
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #container { width: 75%; margin: 0 auto; background: blue; display: flex } #left-container { height: 100%; width: 10em; background: red; } #right-container { height: 100%; flex:1; background: yellow; }
<div id="container"> <div id="left-container">Left</div> <div id="right-container">Right</div> </div>
- using
calc()使用calc()
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #container { width: 75%; margin: 0 auto; background: blue; } #left-container { float: left; height: 100%; width: 10em; background: red; } #right-container { float: left; height: 100%; width: calc(100% - 10em); background: yellow; }
<div id="container"> <div id="left-container">Left</div> <div id="right-container">Right</div> </div>
解决方案4
0 2016-06-12 03:22:22
I'd like to add-in another option as below: 我想添加另一个选项，如下所示：
#header-left-section {
float: left;
position: absolute;
z-index: 1000;
}
#header-right-section {
height: 90px;
width:100%;
position: relative;
overflow: hidden;
}
#header-right-section ins,
#header-right-section div{float:right}
The left div just take enough space for its inside stuff. 左边的div只占用了足够的内部空间。 The right part take 100% the width, and left part stays above it only left(by z-index). 右边部分占据宽度的100％，左边部分只留下它（通过z-index）。 Last css line is just to make inner stuff if of right div to be float on the right. 最后的css行只是为了使内部的东西，如果右边的div在右边浮动。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.