大家好我正在尝试使用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>
Run Code Online (Sandbox Code Playgroud)