Dot*_*tsC 6 css scrollbars width
大家好我正在尝试使用CSS构建布局,我遇到了一个奇怪的问题.对我来说很奇怪.我有3个div的一个标题,一个页脚和搜索Maincontent区域.页眉和页脚必须保持100%的恒定宽度,而MainContent区域必须以996px为中心固定; 这很好,但是当我将浏览器窗口的大小调整为低于996px的宽度然后向右滚动窗口的内容时,100%页眉和页脚似乎被截断并且不再是100%.我已经敲了一个简单的赤裸脚本来说明问题(样式内联以保持紧凑).我知道我可以添加溢出:隐藏到每个容器,以便在调整窗口大小时关闭滚动条.如果宽度低于某个宽度,我还写了一小段jQuery来强制div回到宽度.不过我的问题是围绕CSS,是否有更好的纯CSS修复此问题？或者任何人都可以解释为什么会这样？先感谢您!DotsC
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">
<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>
<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>
尝试一下，请使用 HTML5 的 doctype。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body{margin:0;text-align:center;}
.header,.content,.footer{text-align:left;clear:both;margin:0 auto;}
.header,.footer{width:100%;background-color:blue;height:128px;min-width:996px;}
.content{width:996px;height:512px;background-color:red;}
</style>
<title>Index</title>
</head>
<body>
<div class="header">
Header stuff here
</div>
<div class="content">
Page content stuff here
</div>
<div class="footer">
and your footer...
</div>
</body>
</html>