CSS如何设置div高度100％减nPx
我有一个包装div，其中包含2个div彼此相邻。 在这个容器上面我有一个包含我的标题的div。 包装div必须是100％减去标题的高度。 头是约60像素。 这是固定的。 所以我的问题是：如何设置我的包装div的高度是100％减去60像素？
<div id="header"></div> <div id="wrapper"> <div id="left"></div> <div id="right"></div> </div> 这是一个工作的CSS，在Firefox / IE7 / Safari / Chrome / Opera下testing。
* {margin:0px;padding:0px;overflow:hidden} div {position:absolute} div#header {top:0px;left:0px;right:0px;height:60px} div#wrapper {top:60px;left:0px;right:0px;bottom:0px;} div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
“overflow-y”不是w3c认可的，但每个主stream浏览器都支持它。 你的两个div＃left和right会显示一个垂直滚动条，如果它们的内容太高。
为了在IE7下工作，您必须通过添加DOCTYPE来触发符合标准的模式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> *{margin:0px;padding:0px;overflow:hidden} div{position:absolute} div#header{top:0px;left:0px;right:0px;height:60px} div#wrapper{top:60px;left:0px;right:0px;bottom:0px;} div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto} div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto} </style> </head> <body> <div id="header"></div> <div id="wrapper"> <div id="left"><div style="height:1000px">high content</div></div> <div id="right"></div> </div> </body>
在CSS3中，你可以使用
height: calc(100% - 60px);
如果您需要支持IE6，请使用JavaScript，以便pipe理包装div的大小（在阅读窗口大小后设置元素的位置，以像素为单位）。 如果你不想使用JavaScript，那么这是不能做到的。 有解决方法，但预计一两个星期，使其在任何情况下，在每个浏览器中工作。
对于其他现代浏览器，使用这个CSS：
position: absolute; top: 60px; bottom: 0px;
伟大的一个…现在我已经停止使用％他他他…除了主容器如下所示：
<div id="divContainer"> <div id="divHeader"> </div> <div id="divContentArea"> <div id="divContentLeft"> </div> <div id="divContentRight"> </div> </div> <div id="divFooter"> </div> </div>
这里是CSS：
#divContainer { width: 100%; height: 100%; } #divHeader { position: absolute; left: 0px; top: 0px; right: 0px; height: 28px; } #divContentArea { position: absolute; left: 0px; top: 30px; right: 0px; bottom: 30px; } #divContentLeft { position: absolute; top: 0px; left: 0px; width: 250px; bottom: 0px; } #divContentRight { position: absolute; top: 0px; left: 254px; right: 0px; bottom: 0px; } #divFooter { position: absolute; height: 28px; left: 0px; bottom: 0px; right: 0px; }
我在所有已知的浏览器中testing过，并且工作正常。 使用这种方式有什么缺点吗？
你可以做一些像高度：calc（100％ – nPx）; 例如高度：calc（100％ – 70px）;
这并不完全回答所提出的问题，但它确实创造了你试图达到的相同的视觉效果。
<style> body { border:0; padding:0; margin:0; padding-top:60px; } #header { position:absolute; top:0; height:60px; width:100%; } #wrapper { height:100%; width:100%; } </style>
在这个例子中，你可以识别不同的区域：
<html> <style> #divContainer { width: 100%; height: 100%; } #divHeader { position: absolute; left: 0px; top: 0px; right: 0px; height: 28px; background-color:blue; } #divContentArea { position: absolute; left: 0px; top: 30px; right: 0px; bottom: 30px; } #divContentLeft { position: absolute; top: 0px; left: 0px; width: 200px; bottom: 0px; background-color:red; } #divContentCenter { position: absolute; top: 0px; left: 200px; bottom: 0px; right:200px; background-color:yellow; } #divContentRight { position: absolute; top: 0px; right: 0px; bottom: 0px; width:200px; background-color:red; } #divFooter { position: absolute; height: 28px; left: 0px; bottom: 0px; right: 0px; background-color:blue; } </style> <body > <div id="divContainer"> <div id="divHeader"> top </div> <div id="divContentArea"> <div id="divContentLeft">left </div> <div id="divContentCenter">center </div> <div id="divContentRight">right </div> </div> <div id="divFooter">bottom </div> </div> </body> </html>
我还没有看到任何这样的发布，但我想我会把它放在那里。
<div class="main"> <header>Header</header> <div class="content">Content</div>
然后CSS：
body, html { height: 100%; margin: 0; padding: 0; } .main { height: 100%; padding-top: 50px; box-sizing: border-box; } header { height: 50px; margin-top: -50px; width: 100%; background-color: #5078a5; } .content { height: 100%; background-color: #999999; }
这是一个工作jsfiddle
注意：我不知道浏览器兼容性是什么。 我只是在替代解决scheme，这似乎运作良好。
使用外部包装div设置为100％，然后你的内部包装div 100％现在应该是相对的。
我确信这个曾经为我工作，但显然不是：
<html> <body> <div id="outerwrapper" style="border : 1px solid red ; height : 100%"> <div id="header" style="border : 1px solid blue ; height : 60px"></div> <div id="wrapper" style="border : 1px solid green ; height : 100% ; overflow : scroll ;"> <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text on the left</div> <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the right</div> </div> </div> </body> </html>
如果你不想使用绝对定位和所有的爵士乐，这是我喜欢使用的修复：
你的html：
<body> <div id="header"></div> <div id="wrapper"></div> </body>
你的CSS：
body { height:100%; padding-top:60px; } #header { margin-top:60px; height:60px; } #wrapper { height:100%; }
