CSS/Flexbox全屏布局问题：height属性使用与滚动设置咨询

Let's get this sorted out—you want a full-screen layout without overall page scroll, with header capped at 25% height, footer around 25% (optional), and internal scrolling for nav or main when their content overflows. Here's how to fix your code step by step:

First, Fix the HTML #

Your original code uses className (React-specific syntax) instead of standard HTML class—let's correct that first:

<div id="app">
  <div class="wrapper">
    <header>Header</header>
    <div class="content-row">
      <nav>Nav (scroll me if content is too long)</nav>
      <div class="main-wrapper">
        <main>Main (scroll me if content overflows)</main>
        <footer>Footer</footer>
      </div>
    </div>
  </div>
</div>

Now the CSS (with explanations) #

We'll use Flexbox to lock the layout to the viewport, control each section's height, and add scrolling only where needed:

/* Reset base styles and lock viewport height */
body, html {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevent overall page scroll */
}

/* Make the app and wrapper fill the full viewport */
#app, .wrapper {
  height: 100%;
  display: flex;
  flex-direction: column; /* Stack header above the content row */
}

/* Header: max 25% viewport height, auto-adjusts to content */
header {
  background: red;
  flex: 0 0 auto; /* Don't grow/shrink, fit content */
  max-height: 25vh; /* Cap at 25% of viewport height */
  padding: 1rem;
}

/* Content row: fills remaining space, holds nav and main-wrapper */
.content-row {
  flex: 1; /* Take all remaining height */
  display: flex;
  overflow: hidden; /* Hide overflow to contain child scrolls */
}

/* Nav: fixed 5% width, scrollable if content is too tall */
nav {
  background: blue;
  flex: 0 0 5%; /* Fixed 5% width, no grow/shrink */
  overflow-y: auto; /* Vertical scroll when content overflows */
  padding: 1rem;
  color: white;
}

/* Main wrapper: fills remaining width, stacks main and footer vertically */
.main-wrapper {
  background: gray;
  flex: 1; /* Take remaining width in content row */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Main: fills space above footer, scrollable when content overflows */
main {
  background: yellow;
  flex: 1; /* Take all remaining height in main-wrapper */
  overflow-y: auto; /* Vertical scroll for long content */
  padding: 1rem;
}

/* Footer: ~25% viewport height, optional display */
footer {
  background: darkorange;
  flex: 0 0 auto;
  min-height: 25vh; /* Minimum 25% viewport height */
  padding: 1rem;
}

/* Optional: Hide footer with a class if needed */
.footer-hidden {
  display: none;
}

Key Details: #

• No overall scroll: body, html have overflow: hidden so the page never scrolls—only individual sections get scrollbars when needed.
• Header cap: max-height: 25vh ensures the header never takes more than 25% of the screen, even if it has lots of content.
• Scrollable sections: overflow-y: auto on nav and main adds scrollbars only when their content exceeds their available space.
• Flexbox structure: We use nested flex containers—vertical for the overall layout (header + content row), horizontal for the content row (nav + main-wrapper), and vertical again for the main-wrapper (main + footer).
• Optional footer: Add the .footer-hidden class to the footer element to hide it whenever you need.

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