for some time I was messing around with a specific layout that I was obviously approaching the wrong way.
Here is an approach broken down into its main components:
<!DOCTYPE html> <html> <head> </head> <body> <div class="stretched"> <div class="header">SOME HEADER</div> <div class="someControls"> <input type="button" value="click me"/> <input type="button" value="no me"/> </div> <div class="inner"> some text... </div> </div> </body> </html>
with the following css:
.stretched { position:absolute; height:auto; bottom: 0; top: 0; left: 0; right: 0; width: 250px; margin: 30px auto 20px; background-color: green; } .inner { margin:10px; background-color: red; overflow: auto; }
What I'm trying to do is make the stretched div use all available spaces of the vertical viewport (minus a few pixels higher and lower for the header and footer) and be positioned horizontally with a fixed c.
It seems to work very well. The problem is that the overflow: auto; property overflow: auto; doesn't apply to inner content as i want it. When some text... grows longer, the div inner overlaps my container and doesn't show scrollbars.
Here's the scenario: violin # 1
I want you to not have scrollbars on the body of the page and instead have overflow controlled by scrollbars inside the div inner , thereby making it fully stretched visible.
I could apply the same trick with position: absolute; top: 0; ... position: absolute; top: 0; ... position: absolute; top: 0; ... to the inner div, but then I have to explicitly specify the height of header + someControls , which I want to avoid because it is different on all my pages.
This is how it works, how I want (except for the top: 40px; ): violin # 2
What am I doing wrong here? Thanks in advance!
source share