Question

我在bootstrap中创建一个3列的页脚。但是，当我将页脚大小调整到990px以下时，第二列和第三列会丢失我为整个页脚设置的背景颜色。

--- --- HTML

<footer>
  <div class="container">
         <div class="row">
                <div class="col-md-4 footer1">
                      </div>
             <div class="col-md-5 footer2">
          </div>
           <div class="col-md-3 footer3">
     </div>
  </footer>

为了防止溢出我正在使用：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}`

我创建的页脚正在使用：

footer
{
    background-color: #34495e;
    height: 160px;
    width: 100%
}

当我向页脚添加overflow:hidden时，第二列和第三列消失。

Answer 1

使用@media-queries怎么样？您可以将其添加到footer下的CSS代码中。

@media (max-width: 990px) {
  footer {
    height:auto;
  }
}

当窗口的高度低于990px时，页脚的高度必须为auto才能看到堆叠不足的列。

Click here并调整区域大小以查看更改

顺便说一下，HTML中有</div>个缺失

<footer>
  <div class="container">
         <div class="row">
             <div class="col-md-4  footer1">

             </div>
             <div class="col-md-5  footer2">

             </div>
             <div class="col-md-3  footer3">

             </div>
         </div> <!---  <---This close tag is missing -->
      </div> <!---  <---This close tag is missing -->
  </footer>

页脚调整大小时丢失列背景颜色

1 个答案: