Question 275287 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make sure that the fixed position of the header does not block scrolling the entire page?

Fixed position of the header prevents scrolling of the page.
When I hover over the header, I want the page to scroll, but because the header overlays the overlay, the page does not scroll. How can this be fixed?

html {
      overflow: hidden;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .app {
      height: 100vh;
      overflow-y: scroll;
    }

    .header {
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      background-color: rgba(0, 0, 0, .3);
    }

    .content {
      margin-top: 100px;
    }

    .content > * {
      margin-top: 200px;
    }
<div class="app">
  <header class="header">
    <div class="header__left">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>

    <div class="header__right">
      <button>Button 3</button>
    </div>
  </header>

  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos
      dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore
      maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit
      soluta tempora ullam vel vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas
      voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>

P.S. Text for "It looks like your post is mostly code; please add some more details.":

I want my container to be the full height of the screen in order to put an image in the background that doesn’t need to be scaled.

Tags:

3

Answers


  1. 0

    Your CSS overflow:hidden for html is preventing the page from scrolling. Remove it and add margin-top equal to the height of your header to .content

    This should do the trick.

    Login or Signup to reply.
  2. 0

    Assuming, that on "container" you understood div.app I have changed your example by making it a column flexbox. This way I was able to pull the scroll bar from under the header.

    Relevant changes (diff):

       .app {
-      overflow-y: scroll;
+      display: flex;
+      flex-direction: column;
   }

...

    .header {
-      position: fixed;
...
    }

...

    .content {
-      margin-top: 100px;
+      overflow: auto; 
    }

    html {
      overflow: hidden;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .header {
      z-index: 10;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      background-color: rgba(0, 0, 0, .3);
    }

    .content {
      overflow: auto;
    }

    .content > * {
      margin-top: 200px;
    }
    <div class="app">
  <header class="header">
    <div class="header__left">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>

    <div class="header__right">
      <button>Button 3</button>
    </div>
  </header>

  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos
      dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore
      maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit
      soluta tempora ullam vel vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas
      voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>
    Login or Signup to reply.
  3. 0

    That Magic happens by using display:sticky

    What sicky does is positioning element according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and nearest block-level ancestor.

    You don’t have to change anything and you don’t need any margin-top

    More on MDN

    html {
      overflow: hidden;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .app {
      height: 100vh;
      overflow-y: scroll;
      position:relative;
    }

    .header {
      position: sticky; /* here */
      top:0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px;
      background-color: rgba(0, 0, 0, .3);
    }
/*
    .content {
      margin-top: 100px;
    }*/

    .content > * {
      height: 200px;
    }
    <div class="app">
  <header class="header">
    <div class="header__left">
      <button>Button 1</button>
      <button>Button 2</button>
    </div>

    <div class="header__right">
      <button>Button 3</button>
    </div>
  </header>

  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos
      dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore
      maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit
      soluta tempora ullam vel vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas
      voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search