如何让W3Schools的CSS模板内容区域占浏览器窗口100%高度

Great question! The core issue here is that by default, the html and body elements don't have their height set to match the full browser viewport. So if you just set .content to height: 100%, it won't behave as you expect because it doesn't have a parent element with an explicit height to inherit from. Let's walk through a few reliable solutions:

Approach 1: Use Viewport Height Units (vh) #

This is the simplest and most modern method. 100vh directly equals the full height of the browser window. Keep in mind your page has a .topnav bar though—if you set .content to 100vh directly, it will overlap the nav or create a vertical scrollbar. Fix this with calc() to subtract the nav's height:

/* Update .content styles */
.content {
  background-color: #ddd;
  padding: 10px;
  height: calc(100vh - 46px); /* 46px is the approximate height of .topnav; adjust as needed */
}

If you don't care about overlapping the nav (e.g., you want the content to fully cover the viewport), just use:

.content {
  background-color: #ddd;
  padding: 10px;
  height: 100vh;
}

Approach 2: Inherit Height from Parent Elements #

This follows traditional block-level element height inheritance rules. First, set both html and body to 100% height, then let .content inherit that height:

/* Add this to your styles */
html, body {
  height: 100%;
  margin: 0; /* Ensure no default margins interfere */
}

/* Update .content styles */
.content {
  background-color: #ddd;
  padding: 10px;
  height: 100%;
}

To avoid overlapping the .topnav, add padding to the body and adjust the content height with calc():

html, body {
  height: 100%;
  margin: 0;
  padding-top: 46px; /* Make space for the top nav */
}

.content {
  background-color: #ddd;
  padding: 10px;
  height: calc(100% - 46px);
}

/* Optional: Fix the nav to the top so it stays visible while scrolling */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

Bonus: Make Content Fill Remaining Space (Including Footer) #

If you want .content to take up all the space between .topnav and .footer (so the footer stays at the bottom even if content is short), use Flexbox—it's the most flexible responsive solution:

/* Update body styles */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure body covers at least the viewport height */
}

/* Update .content styles */
.content {
  background-color: #ddd;
  padding: 10px;
  flex: 1; /* Let content automatically fill remaining space */
}

/* Footer stays at the bottom */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
}

This method doesn't require manual height calculations— the browser handles all the space allocation automatically.

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