CODEWITHSUNDEEP
htmlcss
Mohammed Mounir
Mohammed Mounir

Reputation: 81

how to make proper sidebar height?

I'm trying to make my sidebar look like this picture: http://s21.postimg.org/aerg28ih3/image.jpg

When the page height is too small, it looks like this: https://s21.postimg.org/7ly8i7i4n/big.jpg

When it's too long, it looks like this: https://s21.postimg.org/qsbfldymf/small.jpg

I had to put fixed values in each page, but I don't want to put fixed values.

body {
  background-color: #edf1f2;
  color: #777;
  font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1040px;
}
header {
  height: 120px;
  background: #171a21;
  background-image: url(images/header.png);
}
header h1 {
  float: left;
  margin-top: 32px;
}
header nav {
  float: right;
  padding-top: 7px;
}
header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 50px;
}
header nav ul li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin-right: 20px
}
#side {
  float: left;
  padding: 2%;
  background: #1e262c;
  margin-bottom: -5000px;
  padding-bottom: 60.5%;
}
#side ul li {
  margin: 10px 0;
}
<header>
  <div class="wrapper">
    <h1>WEB</h1>
    <nav>
      <ul>
        <li><a href="#.html">1</a>
        </li>
        <li><a href="#.html">2</a>
        </li>
        <li><a href="#.html">3</a>
        </li>
        <li><a href="#.html">4</a>
        </li>
        <li><a href="#.html">5</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div id="side">
  <ul>
    <li>
      <h6>Links</h6>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
  </ul>
</div>

Thanks

Upvotes: 1

Views: 90

Answers (2)

Johannes
Johannes

Reputation: 67768

Add html { height: 100%; margin: 0; } and use this CSS for your sidebar:

#side {
  box-sizing: border-box;
  float: left;
  padding: 2%;
  background: #1e262c;
  height: calc(100% - 120px);
}

It gives it the full height minus the height of the header (120px).

html {
  height: 100%;
  margin: 0
    }
body {
  background-color: #edf1f2;
  color: #777;
  font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1040px;
}
header {
  height: 120px;
  background: #171a21;
  background-image: url(images/header.png);
}
header h1 {
  float: left;
  margin-top: 32px;
}
header nav {
  float: right;
  padding-top: 7px;
}
header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 50px;
}
header nav ul li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin-right: 20px
}
#side {
  box-sizing: border-box;
  float: left;
  padding: 2%;
  background: #1e262c;
  height: calc(100% - 120px);
}
#side ul li {
  margin: 10px 0;
}
<header>
  <div class="wrapper">
    <h1>WEB</h1>
    <nav>
      <ul>
        <li><a href="#.html">1</a>
        </li>
        <li><a href="#.html">2</a>
        </li>
        <li><a href="#.html">3</a>
        </li>
        <li><a href="#.html">4</a>
        </li>
        <li><a href="#.html">5</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div id="side">
  <ul>
    <li>
      <h6>Links</h6>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
  </ul>
</div>

Upvotes: 0

Tyler Roper
Tyler Roper

Reputation: 21672

You could make use of CSS's vh and calc by doing something like this:

body, html {margin: 0; padding: 0;}

#header {
  height: 100px;
}
#footer {
  height: 100px;
}
#sidebar {
  height: calc(100vh - 200px); /*WINDOW HEIGHT - HEADER & FOOTER */
}

What this says is "100% of the window height, minus 200px for the header and footer". The sidebar would then adjust height to always fill the area between the two.

When used effectively, you can do something like this quick demonstration I whipped up. Notice that the sidebar will always adapt to fit between the two, regardless of the amount of content.

Upvotes: 3

Related Questions