如何在100%宽高页面中布局Menu与Slider组件？

咱们先梳理下现有代码的问题：菜单没设置宽度、轮播图的高度和宽度都没适配剩余空间，再加上浏览器默认的边距干扰，才导致没法填满整个页面。下面一步步来修正：

步骤1：清除页面默认边距 #

浏览器会给html和body默认添加margin/padding，这会导致页面出现留白，先把这些清零，同时设置它们的高度为100%，确保容器能撑满视口：

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

步骤2：调整菜单样式 #

菜单需要占满整个页面宽度，加上width: 100%，还可以加个背景色方便区分（可选）：

.menu {
  position: absolute;
  height: 100px;
  top: 0;
  left: 0;
  width: 100%; /* 新增：占满页面宽度 */
  background: #2c3e50; /* 可选：添加背景色 */
  color: white; /* 可选：调整文字颜色 */
  display: flex; /* 可选：让菜单内容垂直居中 */
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box; /* 确保padding不会撑大宽度 */
}

步骤3：适配轮播图的剩余空间 #

轮播图要填满菜单下方的所有区域，高度用calc(100vh - 100px)计算（视口高度减去菜单高度），同时设置宽度为100%，图片也要匹配轮播图的尺寸：

.slider {
  position: absolute;
  top: 100px;
  left: 0; /* 新增：确保左边对齐页面边缘 */
  width: 100%; /* 新增：占满页面宽度 */
  height: calc(100vh - 100px); /* 新增：填满菜单下方的剩余高度 */
  overflow: hidden; /* 可选：防止图片超出时出现滚动条 */
}

.slider img {
  width: 100%; /* 新增：占满轮播图宽度 */
  height: 100%; /* 新增：占满轮播图高度 */
  object-fit: cover; /* 保持图片比例，同时覆盖整个区域 */
}

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container { 
  position: relative; 
  height: 100vh; 
  width: 100%; 
}
.menu { 
  position: absolute; 
  height: 100px; 
  top: 0; 
  left: 0; 
  width: 100%;
  background: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.slider { 
  position: absolute; 
  top: 100px; 
  left: 0;
  width: 100%;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.slider img { 
  width: 100%;
  height: 100%;
  object-fit: cover; 
}
</style>
</head>
<body>
<div class="container">
  <div class="menu"> Menu </div>
  <div class="slider">
    <img src="https://placehold.it/2000x2000">
  </div>
</div>
</body>
</html>

核心要点说明 #

• calc(100vh - 100px)：精确计算轮播图高度，确保它刚好填满菜单下方的所有空间
• object-fit: cover：保证图片拉伸/压缩时不会变形，同时完全覆盖轮播图区域
• box-sizing: border-box：给菜单加padding时，不会导致宽度超出页面范围
• 清除默认边距：避免页面出现不必要的留白和滚动条

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