I´m trying to find css a sulution for this. I have a list menu at the top of my page, below this is a div with content. the content div should always have 100% of the remaining viewport hight. the browser scrollbars should be hidden, the content div should have scrollbars. no problems until here. for this i gave the content div position:absolute and a top value.
My problem know is, if the the user resizes the browser the menu brakes to a new line, and the menu overlaps the content this because the content has a fixes "top" value.
One solution would be to read the height of the menu div on browser resize and then set the position of the content div. But I like to avoid js. My question is, can I do this with css only.
Please find an example below.
Cheers,
Tony
<!DOCTYPE html>
<html lang="en">
<head class="html5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
html, body {
overflow: hidden;
margin: 0;
padding: 0;
}
#nav{
border:1px solid black;
overflow: auto;
height: auto !important;
height: 50px;
min-height: 50px;
}
#nav ul li{
list-style-type: none;
float:left;
margin: 0 40px 0 0;
}
#content{
overflow:scroll;
height:100%;
top:50px;
position: absolute;
}
#content p{height:1024px;border:1px solid red;margin:0;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
<div id="content">
<p class="article">here goes the content</p>
</div>
</body>
</html>
Inserts divs nav
and content
inside one div, container
:
<div id="container">
<div id="nav">
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
<div id="content">
<p class="article">here goes the content</p>
</div>
</div>`
In your CSS:
#container {
width: 1024px;
margin: 0 auto;
}
#nav {
float: left;
width: 100%;
height: 250px;
}
#content{
float: left;
width: 100%;
}