Adding margin-top causes page to extend

Question

Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?

Here is the html:

<!DOCTYPE html>
  <html>
    <head>
      <link href="style.css" type="text/css" rel="stylesheet">
    </head>

    <body>
      <div class="navbar">
        <ul>
          <li class="nav">Home</li>
          <li class="nav">About</li>
          <li class="nav">Upload</li>
        </ul>
      </div>
      <div class="mainbar">
          <h1>hello</h1>
          <h2>whats up</h2>
      </div>
    </body>
  </html>

Here is the css

* {
  box-sizing: border-box;
}

body {
  background-color: #450068;
  background-color: rgb(69, 0, 104);
  margin: 0px;
  padding: 0px;
}
h1, h2 {
  text-align: center;
  color: white;
}

li {
  display: inline;
  text-align: right;
  list-style: none;
  padding: 20px;
}

.navbar {
  background-color: #8729a5;
  border-bottom: .5px solid gray;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  padding: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.mainbar {
  background-color: #8729a5;
  background-color: black;
  height: 100vh;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  border: .5px solid gray;
  border-radius: 15px;
  overflow: scroll;
  overflow-x: hidden;
}

score 1 · Answer 1 · edited May 23 '17 at 12:06

* {
  box-sizing: border-box;
}

body {
  background-color: #450068;
  background-color: rgb(69, 0, 104);
  margin: 0px;
  padding: 0px;
}
h1, h2 {
  text-align: center;
  color: white;
}

li {
  display: inline;
  text-align: right;
  list-style: none;
  padding: 20px;
}

.navbar {
  background-color: #8729a5;
  border-bottom: .5px solid gray;
  width: 100%;
  height: 45px;
  position: fixed;
  top: 0;
  padding: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}



 body > .mainbar {
  background-color: #8729a5;
  background-color: black;
  height: 90vh;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  border: .5px solid gray;
  border-radius: 15px;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: auto
}

new slimScroll(Element);

<!DOCTYPEhtml>
<head>
  <link href="style.css" type="text/css" rel="stylesheet">
  <script src="slimscroll.js"></script>
</head>

<body>
  <div class="navbar">
    <ul>
      <li class="nav">Home</li>
      <li class="nav">About</li>
      <li class="nav">Upload</li>
    </ul>
  </div>
  <div class="mainbar">
      <h1>hello</h1>
      <h2>whats up</h2>
   <h2>whats up</h2>
 
           
  </div>
</body>

Looked at : https://github.com/kamlekar/slim-scroll and Hide scroll bar, but still being able to scroll

Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>

score 0 · Accepted Answer · answered Oct 22 '16 at 01:47

So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.

With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.

If your target browser(s) support modern CSS, a flexbox is the solution to this problem.

If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.

Thank you, I changed the height of .navbar to 5vm, .mainbar to 95vh, re-positioned it and that solved the problem. — caleho6, Oct 22 '16 at 06:18

score 0 · Answer 3 · answered Oct 22 '16 at 02:06

Try modifing your CSS maybe it will solve the problem.

margin-top to padding-top for the .mainbar.

* {
  box-sizing: border-box;
}

body {
  background-color: #450068;
  background-color: rgb(69, 0, 104);
  margin: 0px;
  padding: 0px;
}
h1, h2 {
  text-align: center;
  color: white;
}

li {
  display: inline;
  text-align: right;
  list-style: none;
  padding: 20px;
}

.navbar {
  background-color: #8729a5;
  border-bottom: .5px solid gray;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  padding: 0px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.mainbar {
  background-color: #8729a5;
  background-color: black;
  height: 100vh;
  width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px; /* here */
  border: .5px solid gray;
  border-radius: 15px;
  overflow: scroll;
  overflow-x: hidden;
}

Adding margin-top causes page to extend

3 Answers3