我如何在标头和页脚之间为DIV造型，以始终占用剩余空间的100％

我正在使用Bootstrap 3为我的网站创建标头和页脚。标题和页脚都是静态的，因此如果用户在移动设备上，它们可以相应地移动，以确保中间内容的最佳可见性。我的问题变成了如何将中间内容设置为始终占用剩余空间的100％？标题和页脚并不总是相同的高度，因为hootstrap navbars反应迅速。因此，页脚可能高50像素在桌面上，但在移动设备中，它将大约62个像素高，因为它堆叠了页脚内容（文本）。这是我拥有的代码：

<body>
    <!-- Header -->
        <div class="navbar navbar-default navbar-static-top">
            <div class="navbar-inner">
                <div class="container">
                    <div class="navbar-header">
                        <div class="navbar-brand">
                            Brand
                        </div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-left tabs">
                            <li>
                                <a href="#"><div>
                                        <label class="IconText">Home</label>
                                </div></a>
                                <a href="#"><div>
                                        <label class="IconText">Settings</label>
                                </div></a>
                                <a href="#"><div>
                                        <label class="IconText">About</label>
                                </div></a>
                                <a href="#"><div>
                                        <label class="IconText">Contact</label>
                                </div></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header End -->
        <!-- Middle Content -->
        <div id="background" style="margin-top: -20px;">
            <div class="mainContent">
            </div>
        </div>
        <!-- Middle Content End -->
        <!-- Footer -->
        <div class="navbar navbar-default navbar-static-bottom">
            <div class="container">
                <p><label id="Label" class="navbar-text"></label></p>
            </div>
        </div>
        <!-- Footer End -->
</body>

这是我对CSS的尝试。我一直在浏览这个网站和其他网站暂时尝试我发现的所有内容，但似乎没有用。

.mainContent {
            height: calc(100% - 120px); /* IE9+ and future browsers */
            height: -moz-calc(100% - 120px); /* Firefox */
            height: -webkit-calc(100% - 120px); /* Chrome, Safari */
        }
        #background {
            background : #000000 url("./Images/black_background.jpg") no-repeat bottom left;
            overflow:hidden;
            height: 100%;
        }

在桌面模式下，标头占用70px，页脚占50px，因此这是主符号样式部分中的120px的位置，但标题和页脚尺寸又是响应的。

一个古老的问题，这里有一个很好的答案/起点：http：//css-tricks.com/snippets/css/css/sticky-footer/。

它不是特定于bootstrap的，因此您可能必须将某些东西锤到位，但是它的要点在那里。

相关内容

最新更新

热门标签：