css设置父div高度为90%后，子div高度超出父div范围解决方法

当子div高度超出父div范围时，可以通过以下两种方法解决：

1. 使用绝对定位

可以将子div的position属性设置为absolute，并设置top和bottom属性，使其相对于父div的上下边界定位。这样可以保证子div的高度不会超出父div范围。

.parent {
  height: 90%;
  position: relative; /* 父元素设置relative定位 */
}

.child {
  position: absolute; /* 子元素设置absolute定位 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

2. 使用flex布局

可以将父div设置为flex布局，然后将子div的flex属性设置为1，这样子div会自动填充父div的高度，且不会超出父div范围。

.parent {
  height: 90%;
  display: flex; /* 父元素设置flex布局 */
  flex-direction: column; /* 纵向布局 */
}

.child {
  flex: 1; /* 子元素设置flex属性为1 */
}

以上两种方法都可以解决子div高度超出父div范围的问题，具体使用哪种方法可以根据实际情况灵活选择。

相关问题

css 高度o 100% DIV内自动换行 超出DIV部分隐藏

要在CSS的DIV元素内实现高度为100%、自动换行并隐藏超出部分，可以使用CSS的属性来控制。可以通过设置`overflow`属性为`hidden`来隐藏超出部分，并使用`word-wrap`或`overflow-wrap`属性来实现自动换行，同时将容器的高度设置为100%。

以下是一个示例的CSS代码：

div {
  height: 100%; /* 设置DIV的高度为父元素的100% */
  overflow: hidden; /* 隐藏超出部分 */
  word-wrap: break-word; /* 自动换行 */
}

在上面的示例中，DIV元素的高度被设置为父元素的100%，这将使DIV元素的高度与其父元素相同。超出部分将会被隐藏起来。使用`word-wrap`或`overflow-wrap`属性，文本内容将会在遇到边界时自动换行。

通过使用上述的CSS代码，你可以实现在DIV元素内自动换行，并且超出部分被隐藏起来，同时保持高度为父元素的100%。

CSS让子元素div的高度填满父容器的剩余空间

可以使用CSS的flexbox来实现让子元素div的高度填满父容器的剩余空间。具体实现方式如下：

1. 父容器设置为display: flex;和flex-direction: column;，使子元素垂直排列。
2. 子元素设置为flex-grow: 1;，使其占据父容器剩余的空间。

代码示例：

<div style="display: flex; flex-direction: column; height: 300px;">
  <div style="background-color: red;">顶部内容</div>
  <div style="background-color: blue; flex-grow: 1;">占据剩余空间的内容</div>
  <div style="background-color: green;">底部内容</div>
</div>

在上面的示例中，蓝色的子元素div会自动占据父容器剩余的空间，从而达到让子元素div的高度填满父容器的剩余空间的效果。