Bootstrap 4 Flexbox布局问题：代码实现后无法获取全屏高度求助

Hey there! Let's get that full-screen height working for you— I spot a couple of easy fixes to your current code.

The Root Problem #

Bootstrap's h-100 class only works if all parent elements up to html and body also have a 100% height set. By default, browsers don't give html and body a full viewport height, so your outermost h-100 container can't stretch to the screen edges. Also, your middle content section's flex direction was set to column, which would stack sidebar and content vertically instead of side-by-side (I’m guessing you want them next to each other given the w-25/w-75 classes).

Step-by-Step Solution #

1. Set Full Height for HTML & Body
   Add this CSS to your stylesheet first— it’s the foundation of full-screen layouts:

   html, body {
     height: 100%;
     margin: 0;
   }
   

   The margin: 0 removes default browser spacing that would cause unwanted scrollbars.

2. Adjust the HTML Structure
   Rewrite your markup to use flexbox properly for vertical and horizontal spacing:

   <div class="h-100 d-flex flex-column">
     <!-- Header -->
     <div class="bg-dark text-light p-3">Header</div>
     <!-- Middle Content Area (fills remaining space) -->
     <div class="d-flex flex-grow-1">
       <div class="bg-danger text-light w-25 p-3">Sidebar</div>
       <div class="flex-grow-1 p-3">Content</div>
     </div>
     <!-- Footer -->
     <div class="bg-dark text-light p-3">Footer</div>
   </div>
   

   Let’s break down the changes:

   • The outermost container uses d-flex flex-column to stack header, middle content, and footer vertically.
   • flex-grow-1 on the middle container makes it take up all the space between the header and footer— no more empty gaps!
   • Changed the middle container’s flex direction to row (default for d-flex) so sidebar and content sit side-by-side.
   • Swapped w-75 on the content for flex-grow-1 to make it automatically fill the remaining space next to the sidebar (more flexible than a fixed width).
   • Added p-3 for padding to make the content look cleaner (feel free to tweak this).

Final Result #

Now your layout will stretch to the full viewport height: the header stays fixed at the top, footer at the bottom, and the sidebar/content area fills every bit of space in between.

内容的提问来源于stack exchange，提问作者Ituhimux