尽管设置了最小高度，但图像扩展了容器 div？答案

【问题标题】：Image extends the container div although minimum height is set?尽管设置了最小高度，但图像扩展了容器 div？
【发布时间】：2015-09-17 04:21:13
【问题描述】：

目前我的 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;
}

【问题讨论】：

这就是你所有的 CSS 吗？看起来你没有考虑你的导航栏。尝试将position:absolute; 放在您的导航栏上，您应该会看到您的背景略微上升并且滚动条消失了。你也可以在身上做overflow:hidden
感谢您的建议，尽管我使用了溢出：隐藏，但我计划在下面添加其他 div，如果我添加我相信的话，这些 div 将不会显示。也因为我使用 Bootstrap 添加该定位会缩短导航栏并使其向左浮动。
你应该可以在导航栏上添加width:100%，然后确保它也有top:0; left:0;，只是为了确保。
我希望我能将您的两个答案都标记为正确，但我认为确实解决了它，感谢您的回答和建议，非常感谢。

标签： html twitter-bootstrap css

【解决方案1】：

您已将.main-wrapper 设为其父级的高度的 100%。如果body 是 1000px，.main-wrapper 也是如此。由于您在正文中还有另一个项目，因此它会将您的主包装向下推。

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

【讨论】：