Question

我已经找到了解决方案，但从未找到过。也许我只是看起来不够努力，但我尝试的一切都行不通。这个问题一直困扰着我，我从来没有能够解决它。

当我尝试使div或其他元素占据页面宽度的100％时，我的问题就出现了。页面上内容的容器是960px。当我在全屏浏览器中时没有问题，但是当我将浏览器窗口大小调整为小于内容宽度时，它将创建一个水平滚动错误并且100％元素将不会保留其100％宽度，创建截止。

以下是示例页面：http://www.yenrac.net/

有谁知道如何解决这个问题？在这种情况下，元素是网站顶部的红色标题横幅。

HTML （实际上是WordPress的一点PHP）：

  <body>
<div class="header">
  <div class="clearfix" id="header">
    <h1><?php bloginfo('name'); ?></h1>
    <h3>A Spooky Site</h3>

  </div>
</div>

CSS ：

body {
  margin: 0px;
}

.header {
  height: 100px;
  width: 100%;
  background: #8f2525;
  color: #fff;
}

.clearfix {
  width: 960px;
  height: 100px;
  margin: 0 auto;
}

.clearfix h1 {
  margin: 0px;
  padding: 15px 0px 0px 10px;
  color: #fff;
}

.clearfix h3 {
  margin: 0px;
  padding: 0px 10px;
}

当放大到足以使内容超出浏览器窗口/视口的边框时，也会发生此效果。

Answer 1

首先，不要像这样使用clearfix类。它有一个specific common use，您只会在以后混淆自己和其他人。

您的clearfix宽度为960px。其父级header设置为100％宽度。 header将与页面一起调整大小。无论页面宽度或父宽度如何，clearfix始终为960px，因为这是您设置它的方式。

根据您的需要，有几种解决方案：

在width:100%上设置clearfix，而不是width:960px
在max-width:100%

clearfix

从width:960px

clearfix

根据您的其他评论，您可能需要选项2。

Answer 2

我认为这确实解决了你的问题

max-width: 960px;

Answer 3

这是您的解决方案

    .clearfix {
  width: 100%;
  height: 100px;
  margin: 0 auto;
}

它不会创建滚动。

Answer 4

只需从headerContent div中删除固定宽度的css即可。

Answer 5

它为您提供水平滚动条，因为您指定width（即固定宽度 - 无论屏幕的宽度是多少）。

所以使用

.clearfix {
  max-width: 960px;
}

而不是

.clearfix {
  width: 960px;
}

如果你希望.header不要切断，那么make（但这似乎不是一个好习惯）

.header {
  display: table;
}

希望这有帮助！

HTML / CSS - 如何修复宽度：内容创建水平滚动条时100％切断？

5 个答案: