I have problems with a div that should remain at 100% of the window height. As soon as I put another div in it that is larger than the screen size, the parent div does not stretch after its child. Here is my code:
<html>
<body>
<div class="mainframe">
<div class="screencontainer">
<div class="mainscreen"></div>
</div>
</div>
</body>
</html>
And here is the css:
html,body {
background:white;
height:100%;
margin: 0px 0px;
background-attachment: fixed;
}
.mainframe{
background:green;
width:100%;
position:absolute;
display:block;
margin:0 auto;
height:100%;
overflow:none;
}
.screencontainer{
background:red;
position:relative;
display:block;
overflow:none;
width:60%;
left:250px;
}
.mainscreen{
position:absolute;
width:100%;
height:1000px;
top:100px;
left:0px;
background: radial-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.5));
}
So .mainframe is 100% of the window size only if I delete .screencontainer with all the contents. But as soon as I have this, because its child screen is 1000 pixels high, the mainframe is split in the middle of the page.
Here is jsfiddle:
https://jsfiddle.net/u4oL7t80/
source
share