CODEWITHSUNDEEP
htmlcss
Ugabuga
Ugabuga

Reputation: 29

How to make a div height equal to a scrollable page height?

So im trying to make a store like website, and I want to implement a sidebar with the categories. The problem is that I can't make the sidebar height equal to the body height, it's too small, even when resizing it never reaches the end of the page.

I've been trying to work with the height but can't figure it out, tried to use position: fixed but then it would overlap my header. I wanted it to reach the bottom of the page, without resizing and after resizing.

#categories ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 205px;
  background-color: orange;
  float: left;
  height: 100vh;
}

#categories li h2{
  text-align: center;
}

#categories li a{
  display: block;
  color: black;
  padding: 15px 35px;
  text-decoration: none;
}

#categories li a:hover{
  background-color: black;
  color: white;
}

/* ----------------------------------------------------------------------------------------- */

#products{
  background-color: darkred;
  border-style: solid;
}

#products ul{
  list-style-type: none;
}

#products li{
  padding-bottom: 75px;
  border-bottom: solid;
}

#products li img{
  width: 227px;
  float: left;
}
<body>

  <div id="categories">
    <ul>
      <li><h2> Larem Ipsum </h2></li> <!-- Titulo das categorias-->
 
      <!--Para meter ativa (a class="active")-->
      <li><a href="#1">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#6">5</a></li>
    </ul>
  </div>


  <div id="products">
    <ul>
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Lorum Ipsum Cacetes Cacetinhos! </h3>
        <h1> 3.99€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
    </ul>
  </div>
  
</body>

Here's a fiddle https://jsfiddle.net/r4jp8ocn/

Upvotes: 1

Views: 120

Answers (2)

Sultan khan
Sultan khan

Reputation: 40

bro you need to add the css to following ids

#products {
background-color: darkred;
border-style: solid;
float: right;
width: 60%;
}



 #categories {
    float: left;
    width: 40%;
}

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

I wrapped both sections in a container, giving it a flex rule. And for fixing the side menu, I prescribed the position: sticky rule. I noted all the edits in the css.

Hope it helped you.

body {
  box-sizing: border-box; /*add this it*/
  margin: 0; /*add this it*/
  padding: 0; /*add this it*/
}

.container {
  display: flex; /*add this it*/
}

#categories ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 205px;
  background-color: orange;
  float: left;
  height: 100vh;
  
  position: sticky; /*add this it*/
  top: 0; /*add this it*/
}

#categories li h2{
  text-align: center;
}

#categories li a{
  display: block;
  color: black;
  padding: 15px 35px;
  text-decoration: none;
}

#categories li a:hover{
  background-color: black;
  color: white;
}

/* ----------------------------------------------------------------------------------------- */

#products{
  background-color: darkred;
  border-style: solid;
  flex: 1; /*add this it*/
}

#products ul{
  list-style-type: none;
}

#products li{
  padding-bottom: 75px;
  border-bottom: solid;
}

#products li img{
  width: 227px;
  float: left;
}
<body>

  <div class="container">

  <div id="categories">
    <ul>
      <li><h2> Larem Ipsum </h2></li> <!-- Titulo das categorias-->
 
      <!--Para meter ativa (a class="active")-->
      <li><a href="#1">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#6">5</a></li>
    </ul>
  </div>


  <div id="products">
    <ul>
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Lorum Ipsum Cacetes Cacetinhos! </h3>
        <h1> 3.99€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
      <li>
        <img src="https://www.freeiconspng.com/thumbs/photography-icon-png/img-landscape-photo-photography-picture-icon-12.png">
        <h2> Lorem ipsum dolor sit amet </h2>
        <h3> Quisque sapien ligula, gravida ac magna ac, </h3>
        <h1> €€€ </h1>
      </li>
      
    </ul>
  </div>
  </div>
  
</body>

Upvotes: 1

Related Questions