在相对定位中设置高度 100% [重复]

Posted 2023-03-06

技术标签:

【中文标题】在相对定位中设置高度 100% [重复]【英文标题】：Setting height 100% in relative positioning [duplicate] 【发布时间】：2015-07-17 13:22:20 【问题描述】：

我一直在努力寻找答案。无论如何要在相对定位中将高度设置为 100%？

css

div
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    position:relative;
    background:red;

Fiddle

【问题讨论】：

【参考方案1】：

看到这个fiddle

要使height:100% 工作在相对定位，您需要将<html> 和<body> 的高度也设置为100%。

如果您的<div> 是子div，那么您还需要将父<div>s 的高度设置为100%

将此添加到您的 CSS 中

html,body
    height:100%;

【讨论】：

【参考方案2】：

直截了当的解决方案是添加高度为 body 的父级，如下所示。

body,html
    height:100%;

Fiddle

【讨论】：

【参考方案3】：

是的，但父容器的高度也必须设置为 100%。在你的小提琴的情况下，它将是body

这是因为位置是相对的，所以你需要询问它是相对于什么设置的。如果将其设置为 100%，它将成为其最近父级的 100%，因此如果您的父级容器小于主体的 100%，则相对 div 将不会填充主体的高度。

https://jsfiddle.net/247pao7w/

【讨论】：

以上是关于在相对定位中设置高度 100% [重复]的主要内容，如果未能解决你的问题，请参考以下文章