Question

编辑：Fiddle似乎没有正确加载Twitter Bootstrap所以我建议您将我的HTML和CSS代码复制粘贴到桌面上的空白.html文件中，并对该文件进行故障排除。请记住正确包含Twitter Bootstrap 3（CDN在我的HTML代码中），因为该问题仅在包含Bootstrap时出现。

这是我的小提琴/代码：http://jsfiddle.net/maLog1sm/

以下是小提琴中的代码：

HTML：

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<div class="container-fluid headerRow">
    <div class="row headerRow">
        <div class="col-md-12 navContainer">
            <ul class="nav nav-pills nav-stacked custom-nav-pills">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>  Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> About</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Contact</a></li>
                <li><a href="#"> Portfolio</a></li>
            </ul>
        </div>

        <div class="col-md-10 bodyColumn">

                <div class="footer"><p>Footer</p></div>

        </div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    overflow: auto;
    margin: 0;
    padding: 0;
}

.bodyColumn {
    height: 100%;
    overflow: auto;
}

.headerRow {
    height: 100%;
    overflow: auto;
}
.footer {
    position: absolute;
    bottom: 0%;
}

它使用bootstrap 3.我想知道为什么垂直滚动条在那里，以及我如何删除它（在小提琴上，无论浏览器窗口是否收缩，滚动条都会出现，但在我的实际网站上，它只在窗口缩小时出现。缩小，我的意思是当我使浏览器窗口的宽度小于它的最大宽度时。

Answer 1

您的代码问题在于您是否将100％的高度赋予HTML和BODY，它没问题。你也给了相同的高度：100％到它内部的2个类（两个div），现在HTML不能给内部div 100％。您可以提到身高：自动到班级，根据可用内容调整身高。

这里尝试更换高度：100％高：auto;对于类.bodyColumn，它将解决您的问题

CSS ：已更新

.bodyColumn {
    position:absolute !important;
    bottom:0%;
    height: auto;
    overflow: auto;
}

.headerRow {
    height: 100%;
    overflow: auto;
}

.footer {
    display:block;
}

DEMO：已更新

说明：这里第一个div headerRow占据页面的整个高度（100％高度），现在对于div bodyColumn是在上面的那个之后所以它给予高度100％，所以它被迫这样做，但它的边距：0从内容结束的地方开始（这是你的navContainer div）

Answer 2

我认为问题在于html中定义的类和样式。

在上面的例子中，您将headerRow类添加到父级及其子级之一。而另一个孩子正在进行bodyColumn课程。高度样式为100％的两个元素都尝试获取父级高度的100％并且溢出为auto，父级将在溢出时滚动。

我尝试过你的小提琴，并从子元素中删除headerRow修复你的问题。

Answer 3

尝试将height:100%和bodyColumn中的headerRow媒体资源更改为min-height:100%，如下所示：

.bodyColumn {
    min-height: 100%;
    overflow: auto;
}

.headerRow {
    min-height: 100%;
    overflow: auto;
}

请将身高保持为height:100%。不要将父高度更改为最小高度。

Twitter Bootstrap - 使html，body和container 100％的高度增加了一个垂直滚动条，即使是overflow：auto;

3 个答案: