How can I get a scroll bar only on
?

Question

This is for Blazor but I've reduced it to very simple HTML (this is basically my MainLayout.razor file).

I want to locate

and

at the top of the page and

at the bottom. And all three are always visible, they do not scroll away. And have

always at the bottom.

And - the main problem I'm hitting - I want the vertical scroll bar to only appear when needed, and to be for just

. Only

is scrolled and the scroll bar is in just the

part.

And the height of the

,

, and

is variable. The

can be null (height == 0) in many cases.

How can I accomplish this?




    
    
    Basics




    Nicolay Copy



    
        Home
        News
        Contact
        About
    


    
        Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

        Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.

        But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.

        It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
    


    Lincoln speech text is in the public domain; the organization, remaining text, and photo on this page are copyright 2020 Abraham Lincoln Online. All rights reserved.

css file:

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.my-header {
    background-color: lightcoral;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
}

.my-nav {
    background-color: lightgreen;
    margin: 0;
    padding: 0;
    position: sticky;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    padding: 0px 16px 0px 16px;
}

.my-main {
    flex: 1;
    overflow: auto;
    height: 100%;
    background-color: lightyellow;
    margin: 0;
    padding: 0;
}

.my-footer {
    z-index: 100;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

thanks - dave

Accepted Answer

Hi @David Thielen

Here's a solution that is sooo close. One problem - that vertical scroll bar is there even if not needed. And it will then scroll to shift the top line up to hide its margin. Any ideas?

For the container div (which contains

tag), try to set the overflow property to auto:



    
        
            Hello Header!
        
        
            Hello Navigation!
        
        
            
                Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

                Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.

                But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.

                It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
            
        
        
            Hello Footer!

The output as below:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer

With css, height=100% means 100% height of parent. As none of the divs parents have an absolute size, the height is not applied. You need to make body and html 100%

html, body {

height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; }

Answer

Hi @David Thielen

How can I get a scroll bar only on
?

To set the scroll bar only in the main section instead of the entire page, you can set the overflow property to hidden for the html and body, try to change the CSS style as below:

html, body {
    height: 100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    overflow: hidden;
}

body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.my-header {
    background-color: lightcoral;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 0;
}

.my-nav {
    background-color: lightgreen;
    margin: 0;
    padding: 0;
    position: sticky;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: left;
    padding: 0px 16px 0px 16px;
}

.my-main {
    flex: 1;
    overflow: auto;
    height: 100%;
    background-color: lightyellow;
    margin: 0;
    padding: 0;
}

.my-footer {
    z-index: 100;
    background-color: lightblue;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

Then, the output as below:

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Answer

Here's a solution that is sooo close. One problem - that vertical scroll bar is there even if not needed. And it will then scroll to shift the top line up to hide its margin. Any ideas?




    
        Hello Header!
    
    
        Hello Navigation!
    
    
        
            Four score and seven years ago our fathers brought forth, upon this continent, a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.

            Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived, and so dedicated, can long endure. We are met on a great battle field of that war. We come to dedicate a portion of it, as a final resting place for those who died here, that the nation might live. This we may, in all propriety do.

            But, in a larger sense, we can not dedicate we can not consecrate we can not hallow, this ground The brave men, living and dead, who struggled here, have hallowed it, far above our poor power to add or detract. The world will little note, nor long remember what we say here; while it can never forget what they did here.

            It is rather for us, the living, we here be dedicated to the great task remaining before us that, from these honored dead we take increased devotion to that cause for which they here, gave the last full measure of devotion that we here highly resolve these dead shall not have died in vain; that the nation, shall have a new birth of freedom, and that government of the people, by the people, for the people, shall not perish from the earth.
        
    
    
        Hello Footer!

How can I get a scroll bar only on <main>?

3 additional answers