Menu
This is what I'm trying to accomplish:
+--------screen-----------------------+ | ______________________ |*| | |_static_header______| |*| | | | | |*| | | content |menu | |*| | | scrollable |static| |*| | | | | |*| | | | | |*| | | | | |*| +-------------------------------------+
The content is of variable height, and the content scrollbar must be show in the page body (and not on it's on area). I managed to get the basic idea, but I'm having trouble to getting the content div in it's correct position when the scrollbar shows, and even if I set to always show the scrollbars, I can't use a fixed width because they differ from browser to browser.
<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
<div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
Header
</div>
</div>
<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
<div style="background-color:Orange; width:100%; height:900px;">
Content
</div>
</div>
</div>
<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
<div style="width:500px; float:left;">
<div style="background-color:Green; float:right; width:200px; ">
Menu
</div>
</div>
</div>
In code above the content is off by the scrollbar width, how can I get it right with the rest of the page (ie. calculating it's position without considering the scrollbar width, even if it has one)?
899
Create a Table That Has a Fixed Header. We can create an HTML table that has a fixed header with some CSS. We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable. To make it scrollable, we set the overflow CSS property to scroll .
<style>
body {
padding: 0px;
}
.container {
margin: 0px auto;
position: relative;
width: 500px;
}
#header {
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}
#header .container {
background: blue;
height: 100px;
}
#content {
background: green;
height: 1500px;
margin-top: 100px;
}
#content .inner {
margin-right: 200px;
}
#sidebar {
left: 0px;
position: fixed;
top: 100px;
width: 100%;
z-index: 1000;
}
#sidebar .inner {
background: red;
height: 200px;
position: absolute;
right: 0px;
top: 0px;
width: 200px;
}
</style>
<div id="header">
<div class="container">
header
</div>
</div>
<div id="content" class="container">
<div class="inner">
content
</div>
</div>
<div id="sidebar">
<div class="container">
<div class="inner">
sidebar
</div>
</div>
</div>
Possible solution: http://jsfiddle.net/zWERN/
85
Setting a scroll on all of the page, might result in a disappearing header and menu - when the content is long.
What you're looking for is a subset of the Holy Grail design.
Here's an implementation using the flex display:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
