浏览器调整大小时 CSS 100% 宽度

发布于 2024-09-24 18:55:47 字数 1268 浏览 6 评论 0原文

大家好，我正在尝试使用 CSS 构建布局，但遇到了一个奇怪的问题。对我来说很奇怪。我有 3 个 div，一个页眉、一个页脚和一个 MainContent 区域。页眉和页脚必须保持 100% 的恒定宽度，而主要内容区域必须集中固定在 996 像素；这一切都很好，但是当我将浏览器窗口的大小调整到低于 996px 的宽度，然后向右滚动窗口的内容时，100% 页眉和页脚似乎被截断并且不再是 100%。我已经敲出了一些简单的脚本来说明这个问题（内联样式以保持紧凑）。我知道我可以向每个容器添加溢出：隐藏，以便在调整窗口大小时关闭滚动条。我还编写了一小段 jQuery 来强制 div 返回到宽度（如果宽度低于某个宽度）。然而我的问题是围绕 CSS 的，是否有更好的纯 CSS 解决方案来解决这个问题？或者有人可以解释为什么会发生这种情况吗？先感谢您！点C

<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>

原文

Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to
the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens?
Thankyou in advance!
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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘你却要生生世世 2024-10-01 18:55:48

尝试一下，请使用 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>

Try this, and please use HTML5's 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>

回复收藏 0 原文