CSS宽度100％切断窗口最小化

Question

我有一个标题栏颜色宽度为100％的网站，但当它在屏幕左侧边界时，我滚动时会将其剪掉？

以下是一个例子：

但如果它是一个较小的窗口并滚动：

当屏幕像图片一样减半时，如何将宽度设为100％？

对不起解释不好，我不知道如何解释。希望这些图片会有所帮助。

我的css是：

Header{background-color: #58dede; width: 100%;}

Answer 1

虽然很难想象你的问题，但你可以尝试这个代码 -

CSS：

Header{background-color: #58dede; /*width: 100%;*/ float:none !important; }
.clear {clear:both;}

HTML：

<header>
your content
<div class="clear"></div>
</header>

Answer 2

在您的正文标记中提及您网页的最小文档宽度。例如：

body{min-width:1000px;}

Answer 3

您已将标题的宽度设置为100％，并且在缩小浏览器宽度后，标题的宽度会减少到视口宽度的100％，而不是保持与html和/或标题内容相同的宽度。因此，当您看到水平滚动条然后向右滚动时，背景颜色不再适用于标题的整个所需宽度，因为标题不再是该宽度。

通过调整

可以很容易地解决这个问题

min-width: property 

到所有组合边距+元素宽度的宽度（假设框大小：已设置border-box，因此包括填充和边距到您的宽度）。如果您使用了边距中的百分比或标题的子div，只需在calc（）函数中包含min-width的属性值。

min-width: calc(2% + 200px + ...); etc

Answer 4

HTML的正文内容具有固定的宽度，即使您由于其内部元素而将宽度设置为100％也是如此。因此，如果水平滚动内容具有固定长度，则下面的内容为固定。假设水平滚动内容的长度为z px（固定）。

.header{
  min-width : zpx;
}

我在以这种方式解决的一个应用程序中遇到了同样的问题