How to fix nav and scroll main?

Question

what I wanted is to make a design so that the nav remains fixed on top and main scroll. So when I gave position fixed to nav, it fixed its position, and the main shifted at the bottom of the nav. So to make main visible I gave margin-top 60px. But It shifts complete div instead main. I want to know what breaks my design and how to fix it.

https://codepen.io/kumarmasterpraveen/pen/qBaoZYx?editors=1100

html

<div>
    <nav> navigation </nav>
    <main> main content </main>
</div>

css

nav {
    position: fixed;
    background-color: seagreen;
    height: 60px;
    width: 100%;
}

main {
    margin-top: 60px;
}

Albenis Kërqeli · Accepted Answer · 2021-01-02T14:19:39.870

1

just put in nav element , top:0; and will worked

html {
}

body {
overflow:hidden;
}

nav{
  position: fixed;
  background-color: seagreen;
  height: 60px;
  width: 100%;

  top:0;
}

main{  
  overflow-y:scroll!important;
  width:auto;
 height:700px;
  min-height:100%;
}

<div>
  <nav> navigation </nav>
  <main> main content </main>
</div>

edited Jan 02 '21 at 14:19

answered Jan 02 '21 at 14:00

Albenis Kërqeli

130
8

1

Thanks for a quick reply, Really appreciate that. That works but the scroll bar comes on the complete page not just on the main. – DecPK Jan 02 '21 at 14:04
i updated the code, this should be work, – Albenis Kërqeli Jan 02 '21 at 14:19
i set a height :600px; to main element, i also removed margin, but later you can add this – Albenis Kërqeli Jan 02 '21 at 14:22

tacoshy · Answer 2 · 2021-01-02T14:28:25.367

To do what you try to do according to the comments (having only the scrollbar for the main-content you can use flexbox and CSS-Grid. I have a solution with using CSS-Grid. You declare the body as box-sizing: border-box; and set a definite height of height: 100vh; to span the entire browser height. Same for width with width: 100vw;. Then you use 2 rows by using grid-template-rows: 60px auto;. Thatw ay, the first element (the navbar) will be 60px height and the main content be the entire remaining height of the browser. Last but not least you add an overflow rule to the main content with overflow-y: auto;

body {
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 60px auto;
}

nav {
  padding: 10px;
}

main {
  overflow-y: auto;
  padding: 10px;
}

<body>
  <nav>Navigation</nav>
  <main>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </main>
</body>

As you cant use grid: You can also do it without grid, however it is more tricky. You can use the calc function to make the height of the content as heigh as the remaining viewport height with `height: calc(100vh - 60px); as in the snippet below.

body {
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
}

nav {
  box-sizing: border-box;
  padding: 10px;
  height: 60px;
}

main {
  box-sizing: border-box;
  overflow-y: auto;
  padding: 10px;
  height: calc(100vh - 60px);
}

<body>
  <nav>Navigation</nav>
  <main>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </main>
</body>

I can't use grid. I've to use flexbox only. Thanks for your answer. — DecPK, Jan 02 '21 at 14:23

How to fix nav and scroll main?

2 Answers2