Full height sidebar and full height content, fluid layout

Question

Possible duplicate didn\'t help

I know there are many answers about this topic but neither of them helped me and I spent days on this problem. 90% of the answers and

Answer 1

Try something like this:

FIDDLE

Markup:

<h1>Hello Plunker!</h1>
<div class="container">       
    <div class="sideBar">sideBar</div>
    <div class="content">content</div>
</div>

CSS

*
{
    margin:0;padding:0;
}
html,body,.container, .sideBar, .content
{
    height: 100%;
}
h1
{
    height: 50px;
    line-height: 50px;
}
.container
{
    margin-top: -50px;
    padding-top: 50px;
    box-sizing: border-box;
}
.sideBar
{
    float:left;
    width: 100px;
    background: aqua;
}
.content
{
    overflow:hidden;
    background: yellow;   
}

Answer 2

I've updated your code. Check out it on Plunker.

At first try to not use absolute or relative positions, if there is no need of them.

The second, in your case by giving display: inline and float: left styles, do the same thing, so there is enough to use only the latter one.

Besides, I've set the height of HTML and BODY tags to be 100% and did the same for sidebar and content DIVs, so they will fill the parent's (body) height.

And finally, one of your problems was the repeat-y value of background property. It didn't repeat on x axis, so you didn't see the actual size of the DIVs. I've just set it to repeat instead of repeat-y.