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)?

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

This is what I'm trying to accomplish:



+--------screen-----------------------+

|       ______________________      |*|

|       |_static_header______|      |*|

|       |             |      |      |*|

|       | content     |menu  |      |*|

|       | scrollable  |static|      |*|

|       |             |      |      |*|

|       |             |      |      |*|

|       |             |      |      |*|

+-------------------------------------+

<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)?

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

This is what I'm trying to accomplish:



+--------screen-----------------------+

|       ______________________      |*|

|       |_static_header______|      |*|

|       |             |      |      |*|

|       | content     |menu  |      |*|

|       | scrollable  |static|      |*|

|       |             |      |      |*|

|       |             |      |      |*|

|       |             |      |      |*|

+-------------------------------------+

<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)?

asked Mar 4 '11 at 16:36

Danicco

82321029

This is what I'm trying to accomplish:



+--------screen-----------------------+

|       ______________________      |*|

|       |_static_header______|      |*|

|       |             |      |      |*|

|       | content     |menu  |      |*|

|       | scrollable  |static|      |*|

|       |             |      |      |*|

|       |             |      |      |*|

|       |             |      |      |*|

+-------------------------------------+

<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

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

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

+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

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/

edited Mar 4 '11 at 17:38

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 |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

5 Answers
5

active

oldest

votes

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
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

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

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

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/

edited Mar 4 '11 at 17:38

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/

edited Mar 4 '11 at 17:38

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/

edited Mar 4 '11 at 17:38

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/

edited Mar 4 '11 at 17:38

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

add a comment |

up vote
0
down vote

answered Mar 4 '11 at 17:09

Brian

432314

add a comment |

up vote
0
down vote

answered Mar 4 '11 at 17:09

Brian

432314

add a comment |

up vote
0
down vote

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

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

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

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

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

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

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

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk