减小窗口大小时，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%;
    }
}

最后，您还忘记了将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>