Question

我使用以下CSS代码来拉伸元素（在此示例中为<header>），以使其适合浏览器窗口宽度：

header {
    font-size: small;
    color: white;
    overflow: auto;
    background-color: rgba(51, 51, 51, .8);
    padding: 3px 3px;
    width: 100%;
}

但问题是这个元素或我应用的任何元素width: 100%; overflow: auto;溢出了窗口限制：

| <--- window width ---> |
|  <--- element width ---> |

如何设置CSS属性以使元素宽度完全符合窗口宽度？

| <--- window width ---> |
| <--- element width --> |

Answer 1

删除你的填充。添加填充会增加额外的宽度。所以，你的陈述就像是说“让它100％宽，但随后增加6px。

如果你希望它是全屏WITH填充，请将其设为全屏，然后在其中添加一个带有填充的div。

Answer 2

你应该使用box-sizing：border-box;这意味着元素的宽度保持不变，无论是添加边框还是填充，或者甚至是两者。

Answer 3

<header>
    <div>
    </div>
</header>

和CSS：

header{
    font-size: small;
    color: white;
    overflow: auto;
    background-color: rgba(51, 51, 51, .8);
    width: 100%;
}
header div{
    margin:3px 3px;
    display:block;
}

此处示例：http://jsfiddle.net/Chouchen/mvs79/

Answer 4

如果你删除宽度：100％它应该使用一个div解决方案

header {
font-size: small;
color: white;
overflow: auto;
background-color: rgba(51, 51, 51, .8);
padding: 3px 3px;

}

通常不需要设置宽度：块元素上的100％

如何设置CSS宽度，使元素具有确切的窗口宽度？

4 个答案: