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

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

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

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

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>

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;
}*/

$('#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();
});

JS:

<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>

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;
}*/

$('#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();
});

$（'btnNavBar'）。单击（函数（）{
var$navBar=$（“#navBar”）；
如果（$navBar.length==0）
{
$（''）.prop（'id'，'navBar'）.css（{'height'：'20px'，
'背景色'：'黄色'，'文本对齐'：'中心'}）
.text（'动态添加导航栏'）.insertAfter（'标题'）；
}
其他的
$navBar.remove（）；
});

将此添加到您的CSS

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

从

#main

测试日期：IE10、IE9、IE8、FF、铬

没有更改您的标记

没有使用绝对定位

未使用脚本（纯CSS解决方案）

流体布局

跨浏览器

---

它看起来已经在你的小提琴高度了（没有AP）。这与您希望或不希望在生产环境中使用的内容不同吗？@cantera25-右侧有一个滚动条，因为“main”将从视口底部移动到其父容器高度的100%，该高度太长，超出了标题的长度（+“main”之后和之前的任何其他内容）.好的，我明白了-在加载页面后，页眉和主页之间会插入更多内容？@cantera25-是的。将在那里添加和删除内容，这样会增加整体高度。回答很好，但在IE或Opera中对我不起作用。你能再检查一遍IE吗？你用的是哪款IE？IE 10（最新版本），IE 9（最新版本）。我也在解决IE7，IE8和Opera的问题，但我很乐意使用CSS黑客来修复它们。如果可能的话，好的，明白了。这是jQuery2.0.2版本，不适用于IE或Opera。当我再次将它切换回1.9.1时，它在那些浏览器中工作。不知道为什么2.0.2版本在IE中适用于你而不是我。我在Win7上，但那不重要。