As shown below, the body has divs which have floating elements, but they are all cleared.
The Code (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>The footer hangs in middle of the page. Why does not body expand to contain the #wrapper div?
UPDATE: I can change any style except footer(it's controlled by other guys). Why does body not expand to contain the div?
Aucun commentaire:
Enregistrer un commentaire