div 的高度没有填充 100% 的身高

Question

I have a sidebar a header and a main container. main container and header is nested inside a parent div. When I set height 100% for both sidebar and main container the sidebar doesn't take 100% of the height of the body. I was thinking to not use any percentage values and let flexbox do the work. But I suspect that as I append elements inside the main container area sidebar will behave the same and not take the height of the body space. How can I fix this?

 html { height: 100%; } body { margin: 0; } .sidebar { display: inline-flex; min-height: 100vh; } .sidebar-container { background-color: #00ffff; width: fit-content; } .header_main { display: inline-block; position: absolute; color: white; } .header { background-color: black; width: 100vw; } .main { height: 100vh; width: 100vw; background-color: bisque; }

 <div class="sidebar"> <div class="sidebar-container">sidebar</div> </div> <div class="header_main"> <div class="header">header</div> <div class="main">main</div> </div>

Answer 1

Easiest way would be to use CSS-Grid. Then simply set the body as grid-container and give it a min-height: 100vh :

 body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: min-content auto; grid-template-rows: min-content auto; } aside { width: fit-content; background-color: #00ffff; grid-row: 1 / -1; } header { background-color: pink; } main { background-color: bisque; }

 <aside>Sidebar</aside> <header>Header</header> <main>Main</main>