[分享]css中宽高不能设置100%

在CSS中，设置宽度和高度为100是常见的需求。然而，在某些情况下，我们可能会发现无法将宽度和高度设置为100。这是因为CSS中有一些问题会影响到这个设置。首先，如果没有正确地设置元素的父级容器的宽度...

在CSS中，设置宽度和高度为100%是常见的需求。然而，在某些情况下，我们可能会发现无法将宽度和高度设置为100%。这是因为CSS中有一些问题会影响到这个设置。

首先，如果没有正确地设置元素的父级容器的宽度或高度，将无法将其子元素的宽度和高度设置为100%。父级容器应该设置为固定的宽度或高度，以便子元素可以相对于其进行计算。

/* HTML 代码 */
<div class="container">
  <div class="child"></div>
</div>

/* CSS 代码 */
.container {
  width: 500px;
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
} 

在上面的示例中，容器设置为固定的宽度和高度。因此，子元素可以使用百分比值将其宽度和高度设置为100%。

其次，部分浏览器的盒模型有所不同，可能会影响宽度和高度的计算。IE6、IE7默认采用的是IE盒模型，即W3C盒模型的border-box，而在IE8及以上默认使用W3C盒模型（content-box）。因此，我们在样式中应该明确指定使用哪种盒模型。

/* 采用 IE盒模型 方式 */
.box {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 5px solid #000;
  box-sizing: border-box;
}

/* 采用 W3C盒模型 方式 */
.box {
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 5px solid #000;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
} 

最后，在某些情况下，元素将无法设置宽度和高度为100%，因为其父级容器具有“定位上下文”属性。当容器具有“定位上下文”属性时，其子元素不能紧贴其边缘放置。因此，我们应该更改容器的定位属性，以便其子元素可以使用百分比值设置宽度和高度。

/* HTML 代码 */
<div class="container">
  <div class="child"></div>
</div>

/* CSS 代码 */
.container {
  position: relative; /* 更改定位属性 */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} 

在上面的示例中，我们将容器的定位属性更改为相对位置，这使子元素可以相对于容器的边缘进行计算。

总之，虽然在CSS中设置宽度和高度为100%可能会有一些问题，但我们可以通过一些解决方案解决这些问题。重要的是，正确地设置父级容器的尺寸，并明确使用哪种盒模型。