将页脚粘贴到包装器底部,并获取页面以适应导航和页脚之间的整个空间

Question

将页脚粘贴到包装器底部,并获取页面以适应导航和页脚之间的整个空间

Jul*_*0sS 3 html css footer twitter-bootstrap

这是问题所在,

我正在使用bootstrap,我遇到了这个问题:

我有一个网页,包含一个分为3个不同项目的包装.第一项是bootstrap导航.第二项是div(类col-lg-12 - > bootstrap).第三项是div(类col-lg-12 - > bootstrap).

导航栏始终位于页面顶部,非常完美.

问题是页脚必须始终位于页面的底部,我考虑绝对定位但不适合,包装器具有页脚应该尊重的一些样式属性.AND,#page元素必须适合导航和页脚之间的整个空间(高度).我的意思是,即使#page元素中只有一个文本行,#page height也必须适合所有可用空间.

还考虑到#page div可以包含许多数据,因此,它的高度可以大于窗口高度(此时,包装器仍包含所有,因为它具有最小高度100%attr,并且页脚仍然应该在#page元素......)

<body>
    <div id="wrapper">
        <nav></nav> <!--bootstrap item-->
        <div id="page" class="col-lg-12"></div> <!--bootstrap class-->
        <div id="footer" class="col-lg-12"></div> <!--bootstrap class-->
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

实际上,样式看起来像这样:

<style>
    body,html{
        height:100%;
    }
    #wrapper{
        min-height:100%;
        border:2px solid red;
    }
    #page{
        border:2px solid blue;
    }
    #footer{
        border:2px solid green;
        position:relative;
        bottom:0;
        margin-top:20px;
        margin-bottom:15px;
        height:120px;
    }
</style>

Run Code Online (Sandbox Code Playgroud)

我认为这个问题来自于自定义css和bootstrap类的混合...但是找不到任何修复它的解决方案......已经在堆栈上经历了很多问题但是没有工作......

这是实际的小提琴:

http://jsfiddle.net/0eepqj4m/18/

谢谢!

在此输入图像描述