如何实现div占满屏幕宽高并具备响应式特性

要让.container占满屏幕100%宽高且具备响应式特性，你需要调整全局样式和容器的布局属性，以下是修改方案：

关键修改点 #

1. 重置浏览器默认样式：消除html和body的默认边距，同时设置它们的宽高为100%，确保容器能继承全屏尺寸
2. 设置容器全屏属性：给.container添加宽高100%，并通过box-sizing保证内边距不会超出屏幕
3. 优化Flex布局：调整垂直方向的元素分布，让内容合理填充屏幕，避免溢出

修改后的完整代码 #

CSS 代码

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

* {
  position: relative;
  font-family: 'Imprima', sans-serif;
}

.container {
  background-color: #D5C5C6;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
}

.hero {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.ctc-btn a {
  display: inline-block;
  padding: 10px 24px;
  background-color: #a86668;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

HTML 代码

<div class="container">
  <div class="nev" id="nevbar">导航栏</div>
  <div class="hero">
    <div class="heading">Beauty Brands</div>
    <div class="description">Treat your makeup like jewelry for the face. Play with colors, shapes, structure It can transform you.</div>
    <div class="ctc-btn">
      <a href="">Get Offer</a>
    </div>
  </div>
  <!-- <div id="brand">Brands</div> -->
  <div class="footer">www.logo.com</div>
</div>

效果说明 #

• 容器会自适应屏幕尺寸，无论设备宽高如何变化都能占满全屏
• 导航栏固定在顶部，footer固定在底部，中间的hero区域会自动填充剩余空间
• box-sizing: border-box确保容器的内边距不会导致内容超出屏幕范围
• 响应式特性通过Flex布局自动适配不同屏幕尺寸

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