Question 44623 in Html Question posted in
Some basic documentation can be found here.

Why I cannot give height to 100% when postion fixed is not written? – Html

I made a sidebar with bootstrap classes and when i need to expand the height of sidebar full the height of screen it doesn’t work with height:"100%" css property but when i added one more property position:"fixed" and it started working and my sidebar take full height now. What is the relation between position and height?
Code:

 import React, { useState } from 'react'
   
        
export default function Bar() {


return (
  <>
    <div className="d-flex flex-column flex-shrink-0" style={{width: "4.5rem",backgroundColor:"#cee8ff",height:"100%",position: "fixed"}}>
      <a href="" className="d-block p-3 link-dark text-decoration-none">AMS</a>
      <ul className='nav nav-pills nav-flush flex-column mb-auto text-center'>
        <li className="nv-item my-2">
          <a href="" className="nav-link active py-3 border-bottom" aria-current="page"><i class="fa-solid fa-house"></i></a>
        </li>
        <li className='my-2'>
          <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-address-card"></i></a>
        </li>
        <li className='my-2'>
          <a href="" className="nav-link py-3 border-bottom"><i class="fa-sharp fa-solid fa-bolt"></i></a>
        </li>
        <li className='my-2'>
          <a href="" className="nav-link py-3 border-bottom"><i class="fa-regular fa-calendar-days"></i></a>
        </li>
        <li className='my-2'>
          <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-gear"></i></a>
        </li>
        <li className='my-2'>
          <a href="" className="nav-link py-3 border-bottom"><i class="fa-solid fa-user"></i></a>
        </li>
      </ul>
      
    </div>
    
    </>
)

}

Tags:

2

Answers


  1. 0

    When you set height: 100%, you don’t set it to 100% of the page, you set it to 100% of its’ parent. When you set position: fixed, the parent position and sizes are ignored, and thus it fills the whole page height.

    Login or Signup to reply.
  2. 0

    Just to add to everyone else’s comments, set the body { height: 100vh; } so that the div height, at 100% matches the parent’s height (i.e. the body). Code below to show you the effect:

    body {
  height: 100vh; /*added this */
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="d-flex flex-column flex-shrink-0" style='width: 4.5rem; 
            background-color:#cee8ff; 
            height:100%;'><!-- removed the position fixed from the style attribute -->
  <a href="" class="d-block p-3 link-dark text-decoration-none">AMS</a>
  <ul class='nav nav-pills nav-flush flex-column mb-auto text-center'>
    <li class="nv-item my-2">
      <a href="" class="nav-link active py-3 border-bottom" aria-current="page"><i class="fa-solid fa-house"></i></a>
    </li>
    <li class='my-2'>
      <a href="" class="nav-link py-3 border-bottom"><i class="fa-solid fa-address-card"></i></a>
    </li>
    <li class='my-2'>
      <a href="" class="nav-link py-3 border-bottom"><i class="fa-sharp fa-solid fa-bolt"></i></a>
    </li>
    <li class='my-2'>
      <a href="" class="nav-link py-3 border-bottom"><i class="fa-regular fa-calendar-days"></i></a>
    </li>
    <li class='my-2'>
      <a href="" class="nav-link py-3 border-bottom"><i class="fa-solid fa-gear"></i></a>
    </li>
    <li class='my-2'>
      <a href="" class="nav-link py-3 border-bottom"><i class="fa-solid fa-user"></i></a>
    </li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search