Question

大家好我正在尝试使用CSS构建布局，我遇到了一个奇怪的问题。对我来说很奇怪。我有3个div 标题，页脚和主要内容区域。页眉和页脚必须保持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>

Answer 1

我对您的问题并不完全清楚，但您可以在页眉和页脚上设置min-width:996px;，使其至少与内容一样宽。

Answer 2

试试这个，请使用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>

浏览器调整大小的CSS 100％宽度

2 个答案: