Please give me a html/css pattern with sticky header and footer and STICKY content

css sticky footer
position: sticky not working
css position: sticky
flexbox sticky footer
footer at bottom of page but not fixed
css stick to bottom of div
sticky footer bootstrap
keep footer at bottom of page when scrolling

It is easy to implement a one-page html with a sticky header, sticky footer and scrollable content.

But I divided my content into two parts. The left part is a menu(or a nav bar), and I want it to be scrollable.

like

header
---------------------
       |
       |
 scrol | other
 lable | content
       |
       |
---------------------
footer

html like

<div class="box">
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</div>

I don't know how to make the .left to be scrollable.

What I have tried:

.box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content {
    flex-grow: 1;
    /*overflow: auto;*/
}
.left {
    overflow: auto;
}

If I add overflow: auto; to .content, the scroll bar scrolls the whole content div.

If I add overflow: auto; to .content, the scroll bar doesn't appear on .left div, and 100% height even doesn't work too. The scroll bar appears on the whole html.

I have tried a solution, but in that solution I must know the height of header and footer. I want a pattern with flexibility.

I have read several answers about 'take remaining place', etc, but hadn't get an answer, so I ask here. Thanks for help.


body{        
        padding-top: 60px;
        padding-bottom: 40px;
    }
    .container{
        width: 80%;
        margin: 0 auto; /* Center the DIV horizontally */
    }
    .header, .footer{
        width: 100%;
        position: fixed;        
        background: #333;
        padding: 10px 0;
        color: #fff;
    }
    .header{
        top: 0;
    }
    .footer{
        bottom: 0;
    }    
    /* Some more styles to beutify this example */
    
     p{
        line-height: 200px; /* Create scrollbar to test positioning */
    }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Creating Fixed Header and Footer with CSS</title>

</head>
<body>
    <div class="header">
        header
    </div>
    <div class="container">
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>    
    <div class="footer">
        Copyright &copy; 2016 Your Company      
    </div>
</body>
</html>                            

Sticky Footer, Five Ways, The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not html, body { height: 100%; margin: 0; } .content { min-height: 100%; } You could even add a header above that or more stuff below. If you have important information to share, please contact us. Personally, I like to study patterns. Because the category header is just content with nothing to conceal with but the text itself, it’s a good idea to give the last sticky element (the footer) a top margin of 50px (to keep things equal) so that you won’t see it behind the category header while scrolling.


Hope this answer will help...

html,
body{
  height: 100%;
  width: 100%;
}
.header,
.footer{
  height: 50px;
  background: yellow;
}
.box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.left {
    overflow: auto;
    width: 120px;
    height: 100%;
    background: red;
    color: #fff;
}
right{
    width: calc(100% - 120px);
}
<div class="box">
    <div class="header">Header</div>
    <div class="content">
        <div class="left"> Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content Left Content </div>
        <div class="right"> Right Content </div>
    </div>
    <div class="footer">Footer</div>
</div>

An event for CSS position:sticky | Web, Using position: sticky and IntersectionObserver together to determine when elements become Scrolling container - the content area (visible viewport) containing the list of "blog posts". That would give us a way to calculate the header that's currently showing. First, I set up observers for the header and footer sentinels:. How to create fixed header or footer using CSS. Topic: HTML / CSS Prev|Next. Answer: Use CSS fixed positioning. You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or


Here is a solution where .content is a flexbox row and has overflow: hidden, while .left has overflow: auto

html,
body,
.box {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: silver;
}

.content {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}

.header {
  background: tomato;
}

.footer {
  background: teal;
}

.left {
  background: lime;
  width: 30%;
  height: 100%;
  overflow: auto;
}

.right {
  flex-grow: 1;
  background: navy;
  color: white;
}
<div class="box">
  <div class="header">
    <h1>.header</h1>
  </div>
  <div class="content">
    <div class="left">
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>

      </ul>
    </div>
    <div class="right">
      <p>
        .right
      </p>
    </div>
  </div>
  <div class="footer">
    <h6>.footer</h6>
  </div>
</div>

Sticky header css, Many of us have seen this sticky page header effects – The page header is initially To add a sticky class in the header when we scroll down, we will write some Jul 01, To fix this, add a margin-top (to the content) that is equal or larger than the Apr 23, 2013 · Home → HTML/CSS → Sticky Header or Footer Divs using  Sticky Table Headers with CSS by Chris Coyier (@chriscoyier) on CodePen. It’s probably a bit weird to have table headers as a row in the middle of a table, but it’s just illustrating the idea. I was imagining colored header bars separating players on different sports teams or something.


.content{
            display: flex;
        flex-direction: row;
        }
        .header, .footer{
            width: 100%;
            position: fixed;        
            background: #333;
            padding: 10px 0;
            color: #fff;
        }
        .header{
            top: 0;
        }
        .footer{
            bottom: 0;
        }  
        .left,.right{width: 50%;
        }
        .left{
          height: 200px; overflow-y:auto;
        }
        
         p{
            line-height: normal; 
        }
    <div class="header">
            header
        </div>
        <div class="content">
            <div class="left">
              <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
                 <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
                <li>test5</li>
                <li>test6</li>
                <li>test7</li>
                <li>test8</li>
              </ul>
            </div>
            <div class="right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
            
            </div>
        </div> 
        <div class="footer">
            Copyright &copy; 2016 Your Company      
        </div>

The 3 Golden Rules of Sticky Navigation, Opinions on sticky headers and sticky navigation are quite controversial. A 10​% conversion increase on that figure gives you a further  CSS sticky position is a brilliant tool if you simply need a plain sticky element. If your need grows beyond that though—say you want to add some fancy effects upon the sticky element—you’ll still be better off opting for a JavaScript solution, be that self-written, or a library like Waypoints.js with its sticky module .


8 useful CSS tricks: Parallax images, sticky footers and more, moments learning CSS, and I hope it can prompt some “ah-hah!” moments And​, although we call it a sticky footer, you can't simply solve this with position: sticky , because that can block content. Today To achieve this effect, we need a wrapper div to go around our normal img tag in the HTML. To make  And, although we call it a sticky footer, you can’t simply solve this with position: sticky, because that can block content. Today, the most compatible solution is to use Flexbox.


How to Create Fixed Header or Footer Using CSS, You can easily create sticky or fixed header and footer using the CSS fixed Let's take a look at the following example to understand how it basically works: DOCTYPE html> Add some padding on document's body to prevent the content Send. Advertisements. Is this website helpful to you? Please give us a like,  There is a new way though! Finally! Šime Vidas documented this in Web Platform News.There are a bunch of CSS properties that go together as part of CSS scroll snapping, but it turns out that scroll-padding and scroll-margin can be used outside of a scroll snapping container.


Sticky footers, A sticky footer pattern is one where the footer of your page "sticks" to the the header goes into the first auto sized track, the main content into  On the page(s) where your header is being displayed, you need to take your top section and give it a negative margin (for me -117px was good based on the height of the header I’m using). This is because even though you are using the sticky option, the section doesn’t become sticky until you scroll down on the page past its starting point