小编Dot*_*tsC的帖子

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

大家好我正在尝试使用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)

css scrollbars width

6
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

scrollbars ×1

width ×1