如何在不使用绝对定位的情况下将 div 拉伸到视口底部？答案

【问题标题】：How to stretch a div to the viewport bottom without using absolute positioning?如何在不使用绝对定位的情况下将 div 拉伸到视口底部？
【发布时间】：2013-09-12 19:49:12
【问题描述】：

如何在不使用绝对定位的情况下将一个div（不是视口大小）拉伸到视口底部？

如果我使用绝对定位将我的“主” div 拉伸到视口的底部，那么主上方的任何新添加的元素，比如导航栏，都不会被浏览器自动重新定位，因为“主” " div 不再处于正常流程中。

如果我必须走绝对路线，我真的不想每次在正常流程中添加/删除动态 div（或其他包含）时都重新计算受影响元素的顶部和底部位置。

fiddle

HTML：

<div id="wrapper">
    <div id="header">
        HEADER<br>
        <input id="btnNavBar" type="button" value="add/remove nav bar"/>
    </div>
    <div id="main">
        MAIN CONTENT NEEDS TO STRETCH TO BOTTOM OF VIEWPORT, BUT NOT BE ABSOLUTE SO THAT IT WILL AUTOMATICALLY ADJUST FOR ANY NEWLY ADDED DYNAMIC ELEMENTS ABOVE IT SINCE IT'LL STILL BE IN THE NORMAL FLOW.
    </div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0px;
}
#wrapper {
    height: 100%;
    background-color: black;
}
#header {
    height: 50px;
    text-align: center;
    background-color: red;
}
#main {
    background-color: gray;
    height: 100%;
}
/* UNCOMMENT THIS SECTION TO MAKE THE STRETCHING WORK WITH ABSOLUTE POSITIONING, 
    BUT NOT FOR ANY NEWLY ADDED ELEMENTS */
/*#wrapper {
    position: relative;
}
#main {
    height: auto;
    position: absolute;
    bottom: 0px;
    top: 50px;
}*/

JS：

$('#btnNavBar').click(function(){
    var $navBar = $('#navBar');
    if ($navBar.length == 0)
    {
        $('<div>').prop('id','navBar').css({'height':'20px', 
            'background-color':'yellow', 'text-align':'center'})
            .text('Dynamically Added Nav Bar').insertAfter('#header');
    }
    else
        $navBar.remove();
});

【问题讨论】：

看起来它已经在你的小提琴中处于全高度（没有 AP）。这与您想要的或不在生产环境中工作的不同吗？
@cantera25 - 右侧有一个滚动条，因为“main”正在越过视口底部到其父容器高度的 100%，该高度与标题的长度相比太长（ + header 之后和“main”之前的任何其他内容）。
好的，我明白了——页面加载后页眉和主页面之间会插入更多内容吗？
@cantera25 - 是的。将在那里添加和删除内容，因此这将增加整体高度。

标签： html css position css-position viewport

【解决方案1】：

将此添加到您的 CSS

#wrapper:before
{
    content: '';
    float: left;
    height: 100%;
}
#main:after
{
    content: '';
    display: block;
    clear: both;
}

并从#main 中删除height:100%

Working Fiddle

测试于： IE10、IE9、IE8、FF、Chrome。

没有更改您的标记
没有使用绝对定位
没有使用脚本（纯 CSS 解决方案）
流畅的布局
跨浏览器

【讨论】：

很好的答案，但它在 IE 或 Opera 中对我不起作用。你能再检查一下 IE 吗？
你用的是哪个IE？
IE 10（最新），IE 9（最新）。
我也在为 IE7、IE8 和 Opera 解决问题，但我很乐意使用 CSS hacks 修复它们。如果有可能的话。
好的，知道了。这是 JQuery 2.0.2 版本不能在 IE 或 Opera 上运行。当我再次将其切换回 1.9.1 时，它可以在那些浏览器中使用。不知道为什么 2.0.2 版本适用于 IE 而不是我。我在Win7上，但这没关系。