html - Bootstrap : 100% height footer

Question

我的页脚高度有问题。

在移动网站上，页脚如我所料，但当我在桌面上查看时，背景颜色消失了。

这是我在桌面上看到的:

这是我的代码:

    footer {
      background-color: #232323;
      height: 100%;
      border-top: #ebe050 5px solid;
    }
    footer .widget-title {
      color: #ebe050;
    }
    footer .widget-content {
      color: #eaeaea;
    }

        <div class="row">
        <footer>
            <div class="col-md-4">
                <div class="widget-title">
                    <h3>About us</h3>
                </div>

                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p>
                </div>
            </div>


            <div class="col-md-4">
                <div class="widget-title">
                    <h3>About us</h3>
                </div>

                <div class="widget-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum lacus in lacus dictum, vitae pulvinar sem tempor. Nulla rutrum, lectus eget pulvinar egestas, quam lacus luctus ante, eget facilisis magna leo ut ipsum. Aenean tempus lorem arcu, id dapibus elit aliquet et.</p>
                </div>
            </div>


            <div class="col-md-4">
                <div class="widget-title">
                    <h3>Categories</h3>
                </div>

                <div class="widget-content">
                    <ul>
                        <li>Girl vs Girl</li>
                        <li>MMA</li>
                        <li>WWE</li>
                        <li>Street</li>
                        <li>Sparring</li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>

非常感谢您的帮助!

Answer 1

几件事。

您可以从 footer .widget-*whatever* 场景中删除 footer，因为浏览器将只选择具有 .widget-*whatever*< 类的任何内容 - 但这完全取决于你。

第二，您可以将 height 更改为 min-height 但请确保页脚所在的容器具有 SET HEIGHT 否则为你的高度设置一个百分比将毫无意义(因为浏览器怎么能不占任何百分比呢？)。有了 min-height，这将强制元素至少为 100% - 这意味着如果你没有填满整个空间，底部就会有空白，但如果你使用 max-height，它将是给定的设置高度或更小，意味着一切看起来正常，如果它适合给定的空间。

希望这个答案能解决您的问题。

CSS 为您服务。

footer {
    background-color: #232323;
    min-height: 100%; /*Make sure the container for the footer has a set height*/
    border-top: #ebe050 5px solid;
}
.widget-title {
    color: #ebe050;
}
.widget-content {
    color: #eaeaea;
}

您可能想尝试 max-height 和 min-height 看看哪个最适合您。