Flexbox布局问题：如何让顶部Div填充剩余空间（底部高度动态）

Absolutely, Flexbox is the perfect choice for this scenario—it was built specifically to handle flexible, content-driven layouts like this without messy calculations or hacks.

Here's how to adjust your code to achieve the desired effect: #

First, let's tweak the CSS to make the top div fill remaining space while the bottom div adapts to its content:

body, html {
  height: 100%;
  width: 100%;
  margin: 0; /* Remove default body margin to avoid layout gaps */
}

#container {
  width: 100%;
  height: 100%; /* Ensure container takes full viewport height */
  background: grey;
  display: flex;
  flex-direction: column;
}

.top {
  background: red;
  flex: 1; /* This forces the top div to fill all remaining space */
  padding: 20px;
  overflow: auto; /* Optional: Add scrollbar if top content overflows */
}

.bottom {
  background: yellow;
  padding: 20px;
  /* No flex property here—defaults to flex: 0 1 auto, so it only takes content height */
}

Your HTML can stay as-is:

<div id="container">
  <div class="top">
    Top Content
  </div>
  <div class="bottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis, arcu vitae sollicitudin pellentesque, quam libero imperdiet urna, eu rhoncus lorem dolor sed neque. Donec ex risus, pretium ut maximus fringilla, euismod id mi. Phasellus ligula sem, iaculis ut urna eget, efficitur vulputate sem.
  </div>
</div>

How this works: #

• flex-direction: column stacks the container's children vertically.
• flex: 1 on .top tells it to grow to occupy all leftover space after the bottom div's content height is accounted for.
• The .bottom div uses default flex behavior, so it only takes as much height as its content needs—no unnecessary stretching or shrinking.
• Adding overflow: auto to .top prevents layout breakage if the top content becomes longer than the available space.

Why Flexbox is optimal here: #

• No manual height math (like calc(100% - Xpx) which breaks if content/padding changes).
• It handles dynamic content seamlessly—if the bottom text grows or shrinks, the layout adjusts automatically.
• Clean, readable code that’s easy to tweak later.
• Excellent browser support (works on all modern browsers, with prefixes available for older ones if needed).

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