高度div 100％带填充 [英] Height div 100% with a padding
问题描述
我有一个设置，要求div以10px的边距填充屏幕的100％.在其中，顶部有一个导航窗格，下面是带分隔符的内容div，内部有分隔符的内容潜水.但是，使用父级的100％高度，然后添加边距/填充会将div拉伸到100％+边距+填充.有没有解决的办法?我注意到了绝对的定位技巧，但是如果我绝对定位内容div，那会弄乱其他div的流程.这也使尺寸调整和流动不流动.有什么方法可以保留这些东西并仍然实现我的目标，最好是使用CSS而不是javascript?
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
以下代码:
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
推荐答案
您可以尝试将box-sizing:border-box添加到要同时具有100％高度和边距的任何元素上.
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
在IE8 +和优秀的浏览器中均可使用，因此浏览器支持实际上非常好
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
这篇关于高度div 100％带填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
