CODEWITHSUNDEEP
htmlcss
caleho6
caleho6

Reputation: 5

Adding margin-top causes page to extend

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;
}

Upvotes: 0

Views: 1262

Answers (3)

Abk
Abk

Reputation: 2233

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;
}

Upvotes: 0

Brian Chew
Brian Chew

Reputation: 51

* {
  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 >>

Upvotes: 1

Mark Adelsberger
Mark Adelsberger

Reputation: 45659

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.

Upvotes: 0

Related Questions