嵌套Div设置width:100%仍无法填满父容器宽度的问题

问题描述 #

想要实现顶部带绿色条、主体为米色的嵌套div盒子效果，但内部的.textbox即便设置width:100%也无法填满父容器.card的宽度，同时需要调整样式实现顶部绿条的需求。

原HTML代码 #

<link rel="stylesheet" href="stylesheet.css">
<title>Pixel Paws</title>
<body>
    
    <div class="topnav">
      <a href="#">Username</a>
      <a href="#">My Clan</a>
      <a href="#">Messages</a>
      <a href="#">Trades</a>
      <a href="#">Bookmarks</a>
      <a href="#" style="float:right">Pixel Paws</a>
    </div>
    
    <div class="row">
      <div class="leftcolumn">
        <div class="card">
          <h2>Welcome</h2>
          <div class="textbox" style="height:200px">welcoming message</div>
        </div>

        <div class="card">
          <h2>Announcements</h2>
          <h5>Date Posted | Sep 2, 2017</h5>
          <div class="textbox" style="height:500px">some filler text here</div>
        </div>
      </div>

      <div class="rightcolumn">
        <div class="card">
          <h3>My Account</h3>
          <div class="textbox" style="height:100px">account information</div>
        </div>

        <div class="card">
          <h3>Recent Posts</h3>
          <div class="textbox"><p>post</p></div>
          <div class="textbox"><p>post</p></div>
          <div class="textbox"><p>post</p></div>
          <div class="textbox"><p>post</p></div>
          <div class="textbox"><p>post</p></div>
          <div class="textbox"><p>post</p></div>
        </div>

        <div class="card">
          <h3>Staff Assistance</h3>
          <div class="textbox"><p>some more text</p></div>
        </div>
      </div>
    </div>
    
    <div class="footer">
      wikki / credits / media / etc
    </div>
</body>

原CSS代码 #

*{
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #3F4438;
}

/* NAVIGATION BAR */

.topnav {
  overflow: hidden;
  background-color: #E8E2DD;
  position: sticky;
  top: 14;
  height:60px;
}
.topnav a {
  float: left;
  display: block;
  color: #2C2E3D;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.topnav a:hover {
  background-color: #ddd;
  color: #2C2E3D;
}

/* CONTENT BOXES */

.leftcolumn {   
  float: left;
  width: 75%;
}
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #3F4438;
  padding-left: 20px;
}
h2, h3, h5 {
  color:#2C2E3D;
}

/* TEXT BOXES */

.textbox {
  background-color: #E8E2DD;
  display: table;
  width: 100%;
  padding: 20px;
  color: #2C2E3D;
}

/* RIGHT COLUMNS */

.card {
  background-color: #A3AB96;
  padding: 20px;
  margin-top: 20px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* FOOTER */

.footer {
  padding: 20px;
  text-align: center;
  background: #E8E2DD;
  color: #2C2E3D;
  margin-top: 20px;
  height: 50px;
}

问题原因 #

1. .textbox设置了display: table，这种布局下width:100%的计算逻辑和块级元素不同，加上父容器.card有padding:20px，导致.textbox无法完全填满父容器的可用宽度。
2. 原代码未实现“顶部绿色条”的效果，需要调整.card的样式来添加顶部绿条。

解决方法 #

1. 修复.textbox宽度问题 #

将.textbox的display: table改为display: block，块级元素默认会填满父容器的可用宽度，配合全局的box-sizing: border-box，width:100%会包含padding，完美适配父容器。

2. 实现顶部绿色条效果 #

给.card添加顶部绿色边框，同时调整.card的背景色为透明，让内部.textbox的米色作为主体背景。

修改后的CSS代码 #

*{
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #3F4438;
}

/* NAVIGATION BAR */

.topnav {
  overflow: hidden;
  background-color: #E8E2DD;
  position: sticky;
  top: 14px; /* 补充单位，修复粘性定位不生效问题 */
  height:60px;
}
.topnav a {
  float: left;
  display: block;
  color: #2C2E3D;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.topnav a:hover {
  background-color: #ddd;
  color: #2C2E3D;
}

/* CONTENT BOXES */

.leftcolumn {   
  float: left;
  width: 75%;
}
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #3F4438;
  padding-left: 20px;
}
h2, h3, h5 {
  color:#2C2E3D;
  margin-top: 0; /* 移除默认margin，优化布局紧凑度 */
}

/* TEXT BOXES */

.textbox {
  background-color: #E8E2DD;
  display: block; /* 替换display:table，修复宽度填充问题 */
  width: 100%;
  padding: 20px;
  color: #2C2E3D;
  margin-top: 10px; /* 增加和标题的间距 */
}

/* RIGHT COLUMNS */

.card {
  border-top: 8px solid #5a8a5a; /* 顶部绿色条，可按需调整颜色和厚度 */
  background-color: transparent; /* 去掉原背景色，让textbox的米色作为主体 */
  padding: 20px;
  margin-top: 20px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* FOOTER */

.footer {
  padding: 20px;
  text-align: center;
  background: #E8E2DD;
  color: #2C2E3D;
  margin-top: 20px;
  height: 50px;
}

说明 #

• 补充了.topnav中top:14的单位为px，修复粘性定位不生效的问题。
• 顶部绿条的颜色#5a8a5a和厚度可根据需求自由调整。

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