在CSS设计中,有时我们希望不使用height属性来定义元素的高度。以下是一些解决方法的示例代码:
.container {
  padding-top: 20px;
  padding-bottom: 20px;
}
该方法通过给容器元素添加上下内边距来撑开高度。请注意,如果容器内部有其他元素,它们的高度需要适应容器的高度。
.container::before,
.container::after {
  content: "";
  display: table;
  clear: both;
}
.container::before {
  margin-top: 20px;
}
.container::after {
  margin-bottom: 20px;
}
该方法通过在容器前后添加伪元素,并设置伪元素的外边距来撑开高度。
.container {
  display: flex;
  flex-direction: column;
}
该方法使用flexbox布局将容器元素的display属性设置为flex,并指定flex-direction为column。这样,容器元素会自动根据内容撑开高度。
.container {
  position: relative;
}
.container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
该方法通过将容器元素的position属性设置为relative,并使用绝对定位来撑开高度。
请根据具体情况选择适合的解决方法,并根据需要进行相应的调整。