css如何固定块级元素的高度和宽度

CSS 如何固定块级元素的高度？

在 Web 开发中，我们经常需要为页面中的块级元素设置固定的高度，这可以通过 CSS 的 height 属性来实现，本文将详细介绍如何使用 CSS 固定块级元素的高度，以及相关的问题与解答。

使用 height 属性固定高度

1、绝对定位

绝对定位是一种特殊的定位方式，它可以将元素脱离文档流，并相对于最近的已定位祖先元素进行定位，要使用绝对定位固定块级元素的高度，我们需要先将其父元素设置为相对定位(position: relative;),然后再设置子元素的绝对定位(position: absolute;)以及高度(height: 100px;)。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
}

2、固定高度单位

在设置块级元素的高度时，我们可以使用像素(px)、百分比(%)或者视窗宽度(vw)等单位，百分比和视窗宽度是相对单位，会根据浏览器窗口的大小自动调整，而像素和百分比则是绝对单位，不受浏览器窗口大小的影响。

.child {
  height: 50%; /* 使用百分比 */
}

3、min-/max-height

除了使用 height 属性直接设置高度外，我们还可以使用 min-height 和 max-height 属性来限制块级元素的最小高度和最大高度，这两个属性可以使元素保持在一个相对稳定的范围内，避免因内容变化而导致的高度波动。

.child {
  min-height: 100px; /* 设置最小高度 */
  max-height: 300px; /* 设置最大高度 */
}

问题与解答

1、如何设置一个固定高度且不随内容滚动的块级元素？

答：要实现这个效果，我们可以使用 CSS 的 overflow: auto; 或者 overflow: hidden; 属性，当内容超出块级元素的高度时，使用 auto 可以显示滚动条，方便用户查看内容；而使用 hidden 则会隐藏超出部分的内容，但不会显示滚动条。

.child {
  height: 300px; /* 设置固定高度 */
  overflow: auto; /* 当内容超出高度时显示滚动条 */
}

2、如何设置一个固定高度且只显示一半内容的块级元素？

答：要实现这个效果，我们可以先将块级元素的 display 属性设置为 block,然后再设置其高度和 transform 属性，这样，块级元素就会显示为一个矩形区域，其高度为设定的高度，但只显示一半内容，通过 transform: rotate(270deg); 将矩形区域顺时针旋转90度，即可实现只显示一半内容的效果。

.child {
  display: block; /* 将元素显示为块级 */
  height: 200px; /* 设置固定高度 */
  transform: rotate(270deg); /* 将元素顺时针旋转90度 */
}