Question

我制作了一张背景色为灰色的<div>，其他＆lt; div＆gt;在包含文本的内部。

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

这是我的代码：

＆＃13;

#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%;
  }
}

＆＃13;

<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>

＆＃13;

我已经制作了一个媒体＆＃39;尝试制作的标签应该在窗口宽度低于767像素时使背景颜色为100％，但它似乎不起作用。

我需要做些什么才能让背景达到100％的高度？

Answer 1

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

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

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

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

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

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

<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>

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

1 个答案: