很抱歉继续询问同一问题的版本，但这似乎很难实现。这是我到目前为止的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style type="text/css">
body, html{
height: 100%;
}
#outer {
width: 90%;
height: 90%;
margin: 5% 5% 5% 5%;
background-color: #333;
}
#left-content {
height: 100%;
width: 50%;
float:left;
}
#right-content {
height: 100%;
width: 50%;
float:left;
}
</style>
<div id="outer">
<div id="left-content" style="background-color: red;">xx</div>
<div id="right-content" style="background-color: yellow;">xx</div>
<!-- we need to clear -->
<br style="clear:both" />
</div>
</body>
</html>
现在看来我看到了滚动条，但我只希望外部DIV占据屏幕的90％，并且没有滚动条。
找到fiddle here。
最佳答案
这是我的处理方式：http://jsfiddle.net/remibreton/8hfwp/1/
这里的窍门是让浏览器弄清楚外部元素的宽度和高度。为此，您指定top:0; bottom:0; left:0; right:0;以确保它填满了整个可用空间。然后添加margin:5%;将高度和宽度减小到90％。外部元素应为position:relative;，以允许在内部进行绝对定位。
对于内容元素，它们都可以为width:50%; height:100%。您需要做的是确保正确的人得到特殊的left:50%处理。
的HTML
<div id="outer">
<div class="content left">xx</div>
<div class="content right">xx</div>
</div>
的CSS
body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; } /* margin:5% to make sure the width and height are actually 90%. Overflow is optional */
.content { position:absolute; width:50%; height:100%; } /* Applies to both content element */
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; } /* Left position is equal to the right content element */
与以前相比，此方法可提供更清洁，更灵活的CSS。奖励积分！