CODEWITHSUNDEEP
htmlcss
user10360158
user10360158

Reputation:

Div won't stretch to the bottom of the page

I am trying to make a <div> stretch to the bottom of the page. I want this <div> to be something like a bar all along the left side of my page. It does stretch along the left side when I open the page but when I'm scrolling down it won't stretch anymore. The thing is I have multiple <div>s wrapped inside one another, but this one I am talking about is child only of <html> and <body> elements. I tried a lot of things to make it work properly but height:auto;, height:100%; or height:inherit; don't seem to work, but it works if I use height:000px;. I should also mention that both <html> and <body> have height:100%; and width:100%;.

The code looks like this:

  .leftbar {
    background-color: rgba(0,0,0,0.85);
    width: 10%;
    height: 100%;
    float: left;
    position: relative;
    left: 0;
    margin-top:0;
    bottom:0;
    right:0;
    overflow: hidden;
}

What confuses me even more is that I also have a footer on the bottom side of my page but it works great. It stretches as much as I need it to. The code for it looks like this:

.footer {
    background-color: rgba(0,0,0,0.85);
    width: 100%;
    height: 50px;
    position: relative;
    bottom: 0;
}

Could you tell me pls why that left side bar won't stretch?

Upvotes: 0

Views: 1437

Answers (3)

Luu Dai Hai
Luu Dai Hai

Reputation: 149

The key point to cover your need is using: height: 100vh

However, you have to aware that if the content of sidebar is longer than sidebar container, sidebar background will be missing when you scroll down over 100vh.

So, using min-height: 100vh is better.

Hope this helps.

* {
  box-sizing: border-box;
}
.container::after {
  display: table;
  content: "";
  clear: both;
}

.sidebar {
  float: left;
  width: 200px;
  min-height: 100vh;
  background: #f0f0f0;
  border: 1px solid #ededed;
}

.main-container {
  padding: 20px;
  height: 1200px;
  float: left;
  width: calc(100% - 200px);
  background: #ddd;
}

.footer {
  background: yellow;
  padding: 20px;
}
<div class="container">
  <div class="sidebar">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="main-container">
    This main container is very long.
  </div>
</div>
<div class="footer">
  Yay! you found footer.
</div>

Upvotes: 1

HenryBrown0
HenryBrown0

Reputation: 146

You can use CSS Grid instead of floating divs to create this layout. Here's a sample:

/* Container */
.container {
  margin: 0;
}

/* Grid container */
.grid {
  display: grid;
  grid-template:
      [row1-start] "sidebar content" 90vh [row1-end]
      [row2-start] "footer footer" auto [row2-end]
      / 15vw auto; /* The width of each column */
}


/* Sidebar */
.sidebar {
  grid-area: sidebar;
}


/* Content */
.content {
  grid-area: content;
}


/* Footer */
.footer {
  grid-area: footer;
}
<body class='container'>
  <div class='grid'>
      <div class='sidebar'>This is the sidebar</div>
      <div class='content'>This is the main content</div>
      <footer class='footer'>This is the footer</footer>
  </div>
</body>

Grids systems have many advantages over using floats some include:

  • Easier to read
  • Can be made responsive using media queries easily
  • The grid can be expanded later on easily
  • You don't get confused why your layout randomly breaks with floats

An alternative method to Grid would be Flexbox.

Docs:

Upvotes: 1

Austin Callaghan
Austin Callaghan

Reputation: 185

You could try

height: 100vh;

Remember height: 100% is filling 100% height of its parent container. If the parent container isn't reaching the bottom, then the leftbar can't.

Upvotes: 2

Related Questions