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

时间:2015-06-06 20:28:07

标签: html css twitter-bootstrap responsive-design scrollbar

编辑: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.我想知道为什么垂直滚动条在那里,以及我如何删除它(在小提琴上,无论浏览器窗口是否收缩,滚动条都会出现,但在我的实际网站上,它只在窗口缩小时出现。缩小,我的意思是当我使浏览器窗口的宽度小于它的最大宽度时。

3 个答案:

答案 0 :(得分:3)

您的代码问题在于您是否将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)

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

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

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

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

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