Menu
Here's a basic illustration of the problem:
<html><head><style type="text/css">
html {width: 100%; height: 100%; background: red;}
body {width: 100%; height: 100%; background: green;}
.leftbar, .rightbar {height: 100%; background: blue;}
.leftbar {float: left;}
.rightbar {float: right;}
table {width: 100px; height: 800px; background: black; color: white;
margin: 0 auto 0 auto;}
</style></head>
<body>
<ul class="leftbar"><li>one</li><li>two</li></ul>
<ul class="rightbar"><li>alpha</li><li>beta</li></ul>
<table><tbody><tr><td>blah blah</td></tr></tbody></table>
</body>
</html>
We can immediately see that the floated ul elements are as tall as the body which contains them, the problem is that the body is not as tall as the table which it contains.
How do I make the body be big enough? In this example, I want the leftbar and rightbar to go all the way down, as far as scrolling allows, so you can never see any gap below them.
765
You should set body and html to position:fixed; , and then set right: , left: , top: , and bottom: to 0; . That way, even if content overflows it will not extend past the limits of the viewport. Caveat: Using this method, if the user makes their window smaller, content will be cut off.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
Remove height: 100% from your body rule - this makes the body as tall as the viewport height (which is less than the contents height).
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
