减小窗口大小时，Div 背景颜色未填充文本高度的 100%

Question

我制作了一个背景为灰色的<div>，其中还有一个包含文本的div>。

当我缩小窗口大小时，背景不再是 100% 高度，我希望背景颜色填充所有文本的背景。

这是我的代码：

#info-workshop {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  background: grey;
  border: 1px solid rgba(0, 0, 0, 0.10);
  height: 1565px;
  font-size: 1.2em;
}

.containertext {
  word-wrap: break-word;
  width: 100%;
  max-width: 100%;
  color: blue;
  font-family: Arial;
  font-size: 1.6em;
}

@media all and (max-width: 767px) {
  #info-workshop {
    min-height: 100%;
  }
}

<div id="info-workshop">
  <div class="containertext">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text
      copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted
      over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again
      Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random
      text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted
      over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over

    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text
      copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted
      over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again
      Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random
      text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted
      over and over again

    </div>
  </div>
</div>

我已经制作了一个“媒体”标签，尝试在窗口宽度低于 767 像素时将背景颜色设为 100%，但它似乎不起作用。

我需要做什么才能使背景达到高度的 100%？

Answer 1

您正在指定容器 div 的高度：

#info-workshop {
    [...]
    height: 1565px;
    [...]
}

文本显示在此之外是因为它“溢出”了其父级，但背景只会填充父级的实际高度 - 它不会填充溢出。

您需要删除高度！您也可以删除以下内容，因为它无济于事：

@media all and (max-width: 767px) {
    #info-workshop {
        min-height: 100%;
    }
}

最后，您还忘记在 cols 的父级中包含 row 类，即

<div class="containertext row">

工作片段：

#info-workshop {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  background: grey;
  border: 1px solid rgba(0, 0, 0, 0.10);
  font-size: 1.2em;
}

.containertext {
  word-wrap: break-word;
  width: 100%;
  max-width: 100%;
  color: blue;
  font-family: Arial;
  font-size: 1.6em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="info-workshop">
  <div class="containertext row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text
      copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted
      over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again
      Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random
      text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted
      over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over

    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text
      copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted
      over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over again
      Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random
      text copy and pasted over and over again Just some random text copy and pasted over and over again Just some random text copy and pasted over and over againJust some random text copy and pasted over and over againJust some random text copy and pasted
      over and over again

    </div>
  </div>
</div>