Question posted in 
I want to make standard layout with header, content (main area and aside sidebar) and footer. The right sidebar has background-color not only inside them but this background I want to make overflow on all body (inlcude header and footer).
It should looks like:
My idea was created it by absolute block :before sidebar but when I’m positioning it absolute with overflow body it makes scrolls (vertical and horizontal).
aside.sidebar:before {
content: "";
display: block;
position: absolute;
background-color: #eee;
top: -9999px;
left: 0;
bottom: -9999px;
right: -9999px;
z-index: -1;
}
code: http://jsfiddle.net/cichy380/yrk40e1h/1/ (based on Twitter Bootstrap)
Maybe you have better idea or you can fix my code?
3
Answers
You can use
position:fixedwithvw/vhor you can simply but the before on the body withheight:100%and the same width (%/px) as the sidebar.http://jsfiddle.net/yrk40e1h/4/
I’ve created new code for you. Please follow this. May this help you.
You should avoid the kind of
-9999pxand stuff like that.http://jsfiddle.net/yrk40e1h/7/
The negative
margin-leftis here to deal with the bootstrap columns padding. Tried a few things to deal with this, if someone would have a cleaner solution than this negative margin, your comment is very welcome.The
@media (min-width: 768px)is here to deal with the bootstrap responsive columns. Without this, when you scale down under 768px, all this:beforewould take all the body.