Html 如何在页眉和页脚之间设置一个div，使其始终占据100%的剩余空间？
我正在使用Bootstrap3为我的网站创建页眉和页脚。页眉和页脚都是静态的，因此如果用户在移动设备上，它们可以相应地移动，以确保中间内容的最佳可见性。我的问题是如何将中间内容设置为始终占据100%的剩余空间？页眉和页脚的高度并不总是相同的，因为引导导航栏具有响应性。因此，页脚在桌面上可能有50像素高，但在移动设备中，页脚会有62像素高，因为它堆叠了页脚内容（文本）。以下是我的代码：Html 如何在页眉和页脚之间设置一个div，使其始终占据100%的剩余空间？,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我正在使用Bootstrap3为我的网站创建页眉和页脚。页眉和页脚都是静态的，因此如果用户在移动设备上，它们可以相应地移动，以确保中间内容的最佳可见性。我的问题是如何将中间内容设置为始终占据100%的剩余空间？页眉和页脚的高度并不总是相同的，因为引导导航栏具有响应性。因此，页脚在桌面上可能有50像素高，但在移动设备中，页脚会有62像素高，因为它堆叠了页脚内容（文本）。以下是我的代码： <body> <!-- Header --> <div c
<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>
在桌面模式下，页眉占70px，页脚占50px，这就是mainContent样式部分中120px的来源，但页眉和页脚大小也是响应性的。这是一个由来已久的问题，这里有一个很好的答案/起点：
它不是特定于引导的，因此您可能需要将一些内容敲入到位，但要点就在那里。页眉和页脚的响应如何？如果高度是用百分比设置的，只需减去百分比即可。使用使页眉/页脚响应内容大小的相同响应css。如果页眉和页脚只能有几个不同的大小，则可以用百分比设置内容的高度。否则，我怀疑您必须使用JavaScript。老实说，我不确定Bootstrap如何设置页眉和页脚的大小。我试图通过CSS来挖掘它，但它就像5千行代码。我发现页眉和页脚只是导航栏。.Navbar部分仅列出了50px的最小高度。真的没有一个百分比。
.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%;
}