与丢失背景的专栏的Bootstrap页脚 [英] Bootstrap footer with columns losing background

问题描述

基本上我做了一个黑色背景的页脚。我有3个Col-4，里面有各种信息。在桌面上它看起来很好，但在移动设备上，列堆栈，我想要的。当它们堆叠时，页脚不会更进一步，因此它下方有一个大的白色部分。我想知道是否有人可以看一看并提出建议。代码可能很乱，因为我是新手。



HTML

<！ - css

Basically I have made a footer with a black background. I have 3 Col-4's in it with various info in them. On the desktop it looks fine, but on mobile, the columns stack, which I want. When they stack the footer doesn't go further so it has a large white section underneath. I was wondering if anyone could take a look and suggest something. The codes probably messy, as i am a newbie.

HTML
<!-- css

#footer {
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;

}





}

HTML

HTML

 <footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-4 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-4 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br>
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br>
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2>
 </div>
 <div class="col-sm-4 col-md-4">
      <div class="container-fluid" <br>
<br>
<alignright>
Registered office<br>

14 Stott Court<br>

Tweedmouth<br>

Berwick-Upon-Tweed<br>

Northumberland<br>

TD152YP
</alignight>
      </div>

- >

-->

推荐答案

问题是，你设置了 height 的页脚元素为 200px 。



当列堆叠时，它们的组合高度增加超过 200px 。背景在 200px 处停止，因为这是页脚元素的高度。但内容溢出了页脚元素，因为你没有告诉它不要。



示例1 - 身高 [ ^ ]



要修复它，你可以使用媒体查询来更改列堆叠时的高度，或者用 min-height 。



示例2 - 最小高度 [< a href =https://jsfiddle.net/630696yc/1/target =_ blanktitle =New Window> ^ ]

The problem is, you've set the height of the footer element to 200px.

When the columns stack, their combined height increases beyond 200px. The background stops at 200px, because that's the height of the footer element. But the content overflows the footer element, because you haven't told it not to.

Example 1 - height[^]

To fix it, you can either use a media query to change the height when the columns stack, or replace the height property with min-height.

Example 2 - min-height[^]

这篇关于与丢失背景的专栏的Bootstrap页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！