Saya telah meneliti selama berjam-jam mencoba untuk mencari tahu masalah ini. Saya ingin menampilkan sidebar dengan tinggi 100% secara responsif tanpa position: fixed/absolute, apakah ini mungkin dilakukan?

.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>
0
newITguy 31 Januari 2020, 19:33

2 jawaban

Jawaban Terbaik

Gunakan 100vh di tempat dengan ketinggian 100%.

.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>
5
Muhammad Naveed 31 Januari 2020, 16:37

Apakah beralih dari 100% ke 100vh (tinggi pemirsa) mencapai apa yang Anda cari? % meniru wadah induk, vh menggunakan jendela.

.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>
1
tstrand66 31 Januari 2020, 16:37