Question

注意：我使用bootstrap，如果它能以某种方式提供帮助。

.html, css, container {
height: 100%;
}

我的问题是，我无法在html或body类中设置它（就像一些解决方案建议的那样），因为我不希望它出现在每个页面上。我只需要一页就可以了。

我已尝试将其应用于我的自定义DIV，但如果我内容不满意则无法使用。高度设置为100％，但仍为0px，除非我在div中添加了一些内容。

Answer 1

您可以为要获得100％身高的页面的<html>标记添加一个类

<html class="full-height-page">

然后使用下面的CSS

.full-height-page,
.full-height-page body {
  height: 100%;
  min-height: 100%; /* this is necessary */
}

Answer 2

首先，将此样式添加到此特定页面

        body, html {
        height: 100%;
    }

然后使用它。此代码将页面垂直分为2列，垂直对齐内容。左侧的内容是居中对齐的。仅使用引导类。调用bootstrap 4 beta ver来应用代码。

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-sm-6 styled-bg">
            <div class="d-flex align-items-center justify-content-center h-100">
                <div class="col-sm-6 text-center">
                    This is left column
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="d-flex align-items-center h-100">
                <div class="col-sm-6">
                    This is Right column
                </div>
            </div>
        </div>
    </div>
</div>

如何垂直划分html页面并设置全高背景？

2 个答案: