Question

目前我的CSS存在问题而且我似乎无法弄清楚如何解决这个问题，我尝试研究这个问题，但我无法说出我的意思描述我的情况。

基本上我已将主体设置为100％高度，以便它充当可能设置的任何子属性的父级。我想要实现的主要目标是让我的div的背景图像填充页面的其余部分而不扩展它并创建滚动溢出。然而，它会溢出并扩展身高并产生溢出，您可以在下面的屏幕截图中看到：

我的html代码如下

<body>
<nav class="navbar navbar-default">
    <div class="container center-nav">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">MC</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Videos</a></li>
    </ul>
        </div>            

    </div>    
</nav>
<div class="main-body">
    <div class="main-wrapper">

    </div>
</div>

我的CSS

html{
    height: 100%;
    min-height: 100% !important;
}

body{
    height: 100%;
    min-height: 100% !important;
        margin: 0;
}

.navbar.navbar-default{
    margin-bottom: 0px;
    border-radius: 0px;
}

.main-body{
    height: 100%;
}

.main-wrapper{
    height: 100%;
    background: url("../images/test.jpg");
    background-size:cover;
}

Answer 1

您已使.main-wrapper 100％达到其父级的高度。如果body为1000px，则.main-wrapper也是如此。由于身体中还有另一个物品，它会向下推动你的主包装。

使用height: calc(100% - [the height of the nav])

虽然设置了最小高度，但图像会扩展容器div吗？

1 个答案: