Menu
I have something like this:
+-------------------------------------------+
| -- navigation -- |
+------+------------------------------------+
| | |
| left | |
| side | |
| with | |
| affix| -- content (white) -- |
| menu | |
|-black| |
| | |
| | |
| +------------------------------------+
| | -- footer (white) -- |
+------+------------------------------------+
as my layout in TB 3.0, and some code:
<body>
<header>
<div class="row">
<div class="col-md-12>-- navigation (height = 50px) here --</div>
</div>
</header>
<div class="row">
<div class="col-md-4">-- left side with black background here --</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">-- content with white background here --</div>
</div>
<div class="row">
<div class="col-md-12">-- footer (height = 50px) with white background here --</div>
</div>
</div>
</div>
</body>
I want make my left side (with black background) and content (white background) with height = 100% of my browser window and footer (white background) below my content to be visible (also on scroll).
For now, I get height of last element of the side. If my content is short, it ends for example in the center of vertical side of my browser.
Here is it: http://codepen.io/anon/pen/FxImy
395
If you can use CSS3, and this 50px height is static, you can use calc to achieve your layout.
Here's a DEMO
HTML
<header>
Header
</header>
<div id="Container">
<div id="Left">I'm in the left menu</div>
<div id="Right">
<div id="Content">Content</div>
<footer>Footer</footer>
</div>
</div>
CSS
*
{
padding: 0;
margin: 0;
}
html, body
{
height: 100%;
}
header, footer
{
height: 50px;
background-color: yellow;
text-align: center;
}
#Container, #Content
{
height: calc(100% - 50px);
overflow: auto;
}
#Left, #Right
{
height: 100%;
}
#Left
{
float: left;
background-color: black;
color: white;
}
#Right
{
overflow: auto;
}
If the height is not static, I have another solution for you, that I demonstrate here it's not excatly your layout, but it can be done the same way.
153
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
