CODEWITHSUNDEEP
htmlcss
newITguy
newITguy

Reputation: 19

CSS Full Height Sidebar

I've been researching for hours trying to figure out this issue. I want to display sidebar with 100% height responsively without position: fixed/absolute, is this possible to do it?

.sidebar {
    height: 100%;
    width: 40%;
    border-right: none;
    background: blue;
}
<div class="sidebar">
  <p class="menu-section-head text-left">MENU UTAMA</p>
  <nav class="sidebar-nav">
  <ul>
      <li>
          <span>Menu 1</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 2</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 3</span>
          <hr class="underline">
     </li>
  </ul>
  </nav>
</div>

Upvotes: 0

Views: 109

Answers (2)

Muhammad Naveed
Muhammad Naveed

Reputation: 92

Use 100vh in place 100% in height.

.sidebar {
    height: 100vh;
    width: 40%;
    border-right: none;
    background: blue;
}
<div class="sidebar">
  <p class="menu-section-head text-left">MENU UTAMA</p>
  <nav class="sidebar-nav">
  <ul>
      <li>
          <span>Menu 1</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 2</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 3</span>
          <hr class="underline">
     </li>
  </ul>
  </nav>
</div>

Upvotes: 6

tstrand66
tstrand66

Reputation: 968

does switching from 100% to 100vh (viewer height) accomplish what you are looking for? % mimics the parent contianer, vh uses the window.

.sidebar {
    height: 100vh;
    width: 40%;
    border-right: none;
    background: blue;
}
<div class="sidebar">
  <p class="menu-section-head text-left">MENU UTAMA</p>
  <nav class="sidebar-nav">
  <ul>
      <li>
          <span>Menu 1</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 2</span>
          <hr class="underline">
     </li>
     <li>
          <span>Menu 3</span>
          <hr class="underline">
     </li>
  </ul>
  </nav>
</div>

Upvotes: 1

Related Questions