Static header + menu, scrollable body
up vote
10
down vote
favorite
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)?
css layout header menu
asked Mar 4 '11 at 16:36
Danicco
82321029
add a comment |
up vote
10
down vote
favorite
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)?
css layout header menu
asked Mar 4 '11 at 16:36
Danicco
82321029
6
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
1
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33
add a comment |
up vote
10
down vote
favorite
up vote
10
down vote
favorite
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)?
css layout header menu
asked Mar 4 '11 at 16:36
Danicco
82321029
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)?
css layout header menu
css layout header menu
asked Mar 4 '11 at 16:36
Danicco
82321029
asked Mar 4 '11 at 16:36
Danicco
82321029
asked Mar 4 '11 at 16:36
Danicco
82321029
asked Mar 4 '11 at 16:36
Danicco
82321029
asked Mar 4 '11 at 16:36
Danicco
82321029
82321029
6
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
1
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33
add a comment |
6
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
1
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33
6
6
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
1
1
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33
add a comment |
5 Answers
5
active
oldest
votes
up vote
6
down vote
accepted
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
answered Mar 4 '11 at 17:19
Adam
4,54511829
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
add a comment |
up vote
1
down vote
<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/
answered Mar 4 '11 at 17:31
roryf
21k1572100
add a comment |
up vote
0
down vote
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
answered Mar 4 '11 at 17:09
Brian
432314
add a comment |
up vote
0
down vote
Doesn't position:fixed solve your problem? If you set position:fixed to header and menu div?
answered Mar 4 '11 at 17:29
Jan Daniel
1065
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
add a comment |
up vote
0
down vote
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>
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
add a comment |
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
6
down vote
accepted
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
answered Mar 4 '11 at 17:19
Adam
4,54511829
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
add a comment |
up vote
6
down vote
accepted
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
answered Mar 4 '11 at 17:19
Adam
4,54511829
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
add a comment |
up vote
6
down vote
accepted
up vote
6
down vote
accepted
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
answered Mar 4 '11 at 17:19
Adam
4,54511829
If I understand your problem correctly this will be a solution: http://jsfiddle.net/7pJS8/
answered Mar 4 '11 at 17:19
Adam
4,54511829
answered Mar 4 '11 at 17:19
Adam
4,54511829
answered Mar 4 '11 at 17:19
Adam
4,54511829
answered Mar 4 '11 at 17:19
Adam
4,54511829
4,54511829
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
add a comment |
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
2
2
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
Suppose the static header section wasn't a constant height, but varying according to the situation? Is there still a css-only way to get the content below it to scroll, rather than the whole window?
– enigment
Dec 23 '12 at 15:52
add a comment |
up vote
1
down vote
<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/
answered Mar 4 '11 at 17:31
roryf
21k1572100
add a comment |
up vote
1
down vote
<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/
answered Mar 4 '11 at 17:31
roryf
21k1572100
add a comment |
up vote
1
down vote
up vote
1
down vote
<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/
answered Mar 4 '11 at 17:31
roryf
21k1572100
<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/
answered Mar 4 '11 at 17:31
roryf
21k1572100
edited Mar 4 '11 at 17:38
answered Mar 4 '11 at 17:31
roryf
21k1572100
answered Mar 4 '11 at 17:31
roryf
21k1572100
answered Mar 4 '11 at 17:31
roryf
21k1572100
21k1572100
add a comment |
add a comment |
up vote
0
down vote
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
answered Mar 4 '11 at 17:09
Brian
432314
add a comment |
up vote
0
down vote
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
answered Mar 4 '11 at 17:09
Brian
432314
add a comment |
up vote
0
down vote
up vote
0
down vote
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
answered Mar 4 '11 at 17:09
Brian
432314
There is ways to do it with fixed heights and then use the overflow property on the scrollable areas. However, that's not good practice, what you should look at is using a sticky header or scrolling header (one that follows the viewing area as the user scrolls up and down) from jQuery or your JS library of choice.
answered Mar 4 '11 at 17:09
Brian
432314
answered Mar 4 '11 at 17:09
Brian
432314
answered Mar 4 '11 at 17:09
Brian
432314
answered Mar 4 '11 at 17:09
Brian
432314
432314
add a comment |
add a comment |
up vote
0
down vote
Doesn't position:fixed solve your problem? If you set position:fixed to header and menu div?
answered Mar 4 '11 at 17:29
Jan Daniel
1065
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
add a comment |
up vote
0
down vote
Doesn't position:fixed solve your problem? If you set position:fixed to header and menu div?
answered Mar 4 '11 at 17:29
Jan Daniel
1065
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
add a comment |
up vote
0
down vote
up vote
0
down vote
Doesn't position:fixed solve your problem? If you set position:fixed to header and menu div?
answered Mar 4 '11 at 17:29
Jan Daniel
1065
Doesn't position:fixed solve your problem? If you set position:fixed to header and menu div?
answered Mar 4 '11 at 17:29
Jan Daniel
1065
answered Mar 4 '11 at 17:29
Jan Daniel
1065
answered Mar 4 '11 at 17:29
Jan Daniel
1065
answered Mar 4 '11 at 17:29
Jan Daniel
1065
1065
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
add a comment |
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
Yep it does, though I vaguely remember this not being a "standard" option. Or maybe it was regarding background-position, now I'm not sure. I'm going to give it a try, thanks!
– Danicco
Mar 4 '11 at 17:50
add a comment |
up vote
0
down vote
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>
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
add a comment |
up vote
0
down vote
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>
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
add a comment |
up vote
0
down vote
up vote
0
down vote
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>
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
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>
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
answered Oct 23 '15 at 7:25
AlikElzin-kilaka
18k15123197
18k15123197
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f5196614%2fstatic-header-menu-scrollable-body%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
6
+1 ascii graphic. And it always nice to see good formatted question from a new user on SO.
– igor milla
Mar 4 '11 at 16:49
Is this to be fixed width or should the header span the whole viewport?
– roryf
Mar 4 '11 at 17:00
The whole "body" (header, content+menu below) are to be on a fixed width. I had problems before with really large wide monitors when I didn't set a fixed width...
– Danicco
Mar 4 '11 at 17:04
1
Understanding your HTML was quite difficult, can I suggest that in future you add appropriate class names/IDs and use a stylesheet.
– roryf
Mar 4 '11 at 17:33