Question

我把所有内容放在100％宽度的包装中。我的包装不是孩子。

<body>
<div id="wrapper">

    <?php require_once("header.php"); ?>
    <?php require_once("content.php"); ?>
    <?php require_once("footer.php"); ?>

</div>

CSS：

#wrapper {
overflow-x: hidden;
height: 100%;
width: 100%;
background-color:#fff5e5;
}

但浏览器（chrome，moz）显示：

感谢您的帮助。

Answer 1

页面中的元素在<body>元素之外呈现。这可能是由许多原因造成的（负边距，大宽度，大填充）并且猜测它是浪费时间。创建一个minimal, complete and verifiable example，我会在几分钟内找到它。

如果你不在乎原因是什么，只想删除效果，（这显然是错误的方法去解决它和 我强烈建议反对 ），您可以随时申请

body {
  oveflow-x: hidden;
}

Answer 2

如果是主包装，则只添加

display:block;

必须解决您的问题。

Answer 3

您可能想要检查包装器内的内容是否占用了100％的空间。如果将鼠标悬停在调试中的元素上，将显示一个蓝色框。如果它是宽度的100％，那么这意味着内部的内容可能只跨越屏幕宽度的一部分。

为什么我的宽度：100％包装不能正常工作？

3 个答案: