当窗口在底部滚动时 html css 宽度问题

Question

我正在一个网站上工作，我不知道如何解决这个问题。 当页面加载并且浏览器最大化时，底部栏会占据整个屏幕，背景显示为蓝色。

当网站大小调整并且浏览器的底部滚动条可见并可以水平滚动时，div 的背景会在屏幕结束的地方被切断，之后就变成白色，而不是一直填充为蓝色.

知道我需要对此进行什么更改吗？我认为网站的正文需要一些东西？我知道可能超级简单只是想不出来。

谢谢

https://jsfiddle.net/hd9c76tz/

CSS：

    * {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  background-color: #FFFFFF;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: "Lato", Helvetica Neue, sans-serif;
  font-weight: 300;
  margin: 0px;
  width: 100%;
  text-align: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#content {
  background-color: #FFFFFF;
  color: #000433;
  font-size: 0px;
}

#content-block {
  width: 100%;
  background-color: #FFFFFF;
  padding: 20px 0px;
  font-size: 12px;
}

#content-headline {
  font-size: 55px;
  font-weight: 500;
  line-height: 55px;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

#content-item-container {
  width: 100%;
  font-size: 0;
}

#content-wrapper {
  max-width: 1460px;
  min-width: 1200px;
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block {
  padding: 20px 0px;
  margin: 40px auto 0 auto;
  background-color: #EFF6FF;
  width: 100%;
  color: #000433;
  font-size: 0px;
  font-weight: 500;
}

#facts-block-content {
  padding: 0 0 0 20px;
  display: inline-block;
  vertical-align: top;
  height: 55px;
}

#facts-block-headline {
  font-size: 16px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
}

#facts-block-text {
  font-size: 12px;
  font-weight: 400;
  text-transform: capitalize;
}

#facts-block-item {
  font-size: 0px;
  display: inline-block;
  margin: 0px;
  width: 25%;
  padding: 40px 0px;
  text-align: left;
}

#facts-block-wrapper {
  min-width: 1200px;
  max-width: 1460px;
  ;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}

#legal-content-paragraph {
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  text-align: justify;
  margin: 0 0 40px 0;
  color: #000433;
}

Answer 1

您可以删除

min-width

属性。它将修复滚动和 div 截止问题。

#content-wrapper {
  max-width: 1460px;
  /* min-width: 1200px; */
  padding: 0px 48px;
  margin: 40px auto 0 auto;
  text-align: center;
}

#facts-block-wrapper {
  /* min-width: 1200px; */
  max-width: 1460px;
  margin: auto;
  text-align: center;
  padding: 0px 48px;
}