Html 显示带有边距的 div 宽度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13322789/
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
Display a div width 100% with margins
提问by Random78952
I want to display an expandable div(width: 100%) with margins...
我想显示一个带有边距的可扩展div( width: 100%)...
Here is my code :
这是我的代码：
<div id="page">
<div id="margin">
"some content here"
</div>
</div>?
And here is my css code :
这是我的 css 代码：
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 300px;
margin: 10px;
}?
采纳答案by Daniel Calliess
You can use the following CSS to achieve the desired result:
您可以使用以下 CSS 来实现所需的结果：
#page {
background: red;
overflow: auto;
}
#margin {
background: green;
height: 280px;
margin: 10px
}
回答by Vuka?in Manojlovi?
You can use calc()css function (browser support).
您可以使用calc()css 功能（浏览器支持）。
#page {
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 300px;
margin: 10px;
}?
Alternatively, try using padding instead of margin and box-sizing: border-box(browser support):
或者，尝试使用填充而不是边距和box-sizing: border-box（浏览器支持）：
#page {
background: red;
width: 100%;
height: 300px;
padding: 10px;
}
#margin {
box-sizing: border-box;
background: green;
width: 100%;
height: 300px;
}
回答by Andy
Sometimes it's better to do the opposite and give the parent divpadding instead:
有时最好做相反的事情并给父div填充：
What I did was change the CSS of #pageto:
我所做的是将 CSS 更改#page为：
#page {
padding: 3%;
width: 94%; /* 94% + 3% +3% = 100% */
/* keep the rest of your css */
/* ... */
}
Then delete the marginfrom #margin
然后删除margin从#margin
Note: this also adds 3% to the top and bottom (so 6% to the height) which makes it a little taller than 300px - so if you need exactly 300px, you could do something like padding:10px 3%;and change the height:280px;to add up to 300px again.
注意：这也会在顶部和底部增加 3%（所以是高度的 6%），这使得它比 300px 高一点 - 所以如果你正好需要 300px，你可以做一些类似的事情padding:10px 3%;并height:280px;再次将其更改为 300px .
回答by Sebastien Lorber
For LESS users only:
仅适用于 LESS 用户：
Using the nice solution of Vuka?in Manojlovi? doesn't work out of the box because LESS executes + or - operations during the LESS compilation. One solution is to escape LESS so that it doesn't execute the operation.
在 Manojlovi 中使用 Vuka 的好解决方案？开箱即用，因为 LESS 在 LESS 编译期间执行 + 或 - 操作。一种解决方案是转义 LESS 以便它不执行操作。
Disable LESS-CSS Overwriting calc()
@someMarginVariable = 15px;
margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);
or can use a mixin like:
或者可以使用像这样的混合：
.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
@minusValue: (@marginSize+@paddingSize)*2;
padding: @paddingSize;
margin: @marginSize;
width: calc(~"100% - "@minusValue);
width: -moz-calc(~"100% - "@minusValue);
width: -webkit-calc(~"100% - "@minusValue);
width: -o-calc(~"100% - "@minusValue);
}
回答by Tolly
The correct way to achieve this by standard is:
通过标准实现这一目标的正确方法是：
#margin {
background: green;
height: 280px;
margin: 10px;
width: auto;
display: block;
}
回答by Andrew Ost
If possible, try to use padding with box-sizing instead, on #page element
如果可能，请尝试在 #page 元素上使用带框大小的填充
#page {
padding: 10px;
box-sizing: border-box;
background: red;
float: left;
width: 100%;
height: 300px;
}
#margin {
background: green;
float: left;
width: 100%;
height: 100%;
}
