如下图所示，正文中包含具有浮动元素的div，但它们都被清除。
代码（https://jsfiddle.net/4ke0cxg7/2/）：
html, body {
height: 100%;
}
body {
background: grey;
}
#foot {
position: absolute;
bottom: 0;
background: white;
font-size: 16px;
font-weight: bold;
}
#h {
margin-bottom: 20px;
}
#wrapper {
margin-bottom: 30px;
}<body>
<div id="wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="card card-small">
<div class="card-heading simple">
Phone Book
</div>
<div class="card-body">
<!-- I have other tabs here -->
<div class="tab-content">
<div class="active tab-pane" id="columns">
<table class="table table-striped table-condensed sampleTable">
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>State</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">John</a>
</td>
<td>NY</td>
<td></td>
</tr>
<!-- Snipped for conciseness -->
<tr>
<td>21</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Rambo</a>
</td>
<td>NY</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
Footer
</div>
</body>
页脚挂在页面中间。为什么不扩展主体以包含#wrapper div？
更新：我可以更改除页脚之外的任何样式（由其他人控制）。为什么身体不扩展以包含div？
答案 0 :(得分：0)
像这样更改你的CSS
html {
overflow: auto;
height: 100vh;
}
body {
position: relative;
background: grey;
min-height: 100%;
}
html {
overflow: auto;
height: 100vh;
}
body {
position: relative;
background: grey;
min-height: 100%;
}
#foot {
position: absolute;
bottom: 0;
background: white;
font-size: 16px;
font-weight: bold;
}
#h {
margin-bottom: 20px;
}
#wrapper {
margin-bottom: 30px;
}<link href="https://s3-sa-east-1.amazonaws.com/vochani/bootplus.css" rel="stylesheet"/>
<div id="wrapper">
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="card card-small">
<div class="card-heading simple">
Heading
</div>
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="columns">
<table class="table table-striped table-condensed sampleTable">
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>State</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">John</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Kavita</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Luke</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Bob</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Peter</a>
</td>
<td>WA</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Mike</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Andrew</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Hilo</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Jeff</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Elon</a>
</td>
<td>WA</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Cindy</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Bri</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Brian</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>13</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">NIck</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>14</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Miranda</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>15</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Lauren</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Cherry</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>17</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Jessica</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>18</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Bom</a>
</td>
<td>CA</td>
<td></td>
</tr>
<tr>
<td>19</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Ram</a>
</td>
<td>NY</td>
<td></td>
</tr>
<tr>
<td>20</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Telco</a>
</td>
<td>WA</td>
<td></td>
</tr>
<tr>
<td>21</td>
<td title="Scroll to the column">
<a href="javascript:void(0)" data-row-selector="true" class="column-selector">Rambo</a>
</td>
<td>NY</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
Footer
</div>