Question

我忙于新网站。对于菜单栏，我将宽度放在100%上以便在此处显示：

font-family: 'Champagne';
    font-size:20px;
    display: block;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    background: #0193CF;
    text-align: right;
    padding: 0 2em;
    margin: 0;
    text-transform: capitalize;

但由于一些奇怪的原因，菜单栏的宽度实际上比页面的其余部分长。看一下底部的截图。

有没有人有这方面的经验？

100% is to large...

Answer 1

问题是width和padding属性的组合。在典型的CSS框模型中，填充是添加。如果您的复选框width为100％，则应用于其中的padding将添加到宽度。因此width计算的数字会大于width属性中设置的数字。

我建议在CSS中使用box-sizing属性，如下所示：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

宽度：100％+填充：0 2em，等于大于100％。通过使用样式表中的box-sizing属性，您将告诉浏览器包含填充作为总宽度的一部分。

Answer 2

box-sizing:border-box ... 这在计算尺寸时基本上考虑了边距和填充。

在这里概述了关于盒子模型的更详细的解释：

http://css-tricks.com/box-sizing/

涵盖大多数跨浏览器问题的另一个选择是尝试使用重置来清除所有元素，并将您带回真正的＆＃34;开始＆＃34;。

许多浏览器在特定元素上添加了自己的填充ood和间距的小花絮，因此重置通常用于将浏览器重置为真正的方形＆＃34;

这是一个比较受欢迎的：

http://meyerweb.com/eric/tools/css/reset/

但是这个网站回顾了很多：

http://www.css-reset.com/

Answer 3

width设置内容宽度，不包括填充或边距。

尝试删除填充或更改框大小。

Answer 4

如果box-sizing没有为人们解决此问题，请检查您的CSS的最高级别 - 我为width:100% CSS发现了一次流氓<body>。

我调试这些问题的方法是打开开发人员工具并一次删除一个页面块（即主要<div>）：如果删除它们中的任何一个导致布局快速恢复到指示的位置你刚刚删除的那个导致了这个问题。

CSS：100％大于页面宽度？

4 个答案: