Css 同时使用高度和最小高度，并以百分比表示

有没有一种方法可以根据CSS中的百分比设置最小高度

当我同时使用高度和最小高度时，我不能同时使用百分比。我正在寻找一种控制最小高度的方法，因为我的内容是基于百分比的，并且它的高度发生了变化

我无法将高度设置为自动，因为我需要高度为100%，最小高度也基于百分比

这就是页面的设计，它应该是全屏的，直到最小高度，但是在1400到1100的范围内，页面是响应的，并且变小了百分之，我想保持这些比率，我的意思是高度100%，直到最小特定高度，但是由于我的内容高度改变，我想特定的最小高度也改变

<div class="outer">
    <div class="inner"></div>
</div>

body, html {
  height: 100%;
}
.outer {
    height:100%;
    background:red;
    /* MIN-HEIGHT ???????!!! */
}
.inner {
    position: absolute;
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}

正文，html{
身高：100%；
}
.外部{
身高：100%；
背景：红色；
/*最小高度*/
}
.内部{
位置：绝对位置；
背景：蓝色；
框大小：边框框；
宽度：60%；
保证金：自动；
填充顶部：30%；
}

这就是我的问题所在

如你所见，我想将外部div的最小高度设置为内部div的大小，但是内部div是基于百分比的，高度也是100%，最小高度可以是多少

---

更新：如果我正确理解了您的问题，您可以省略该绝对位置，设置为

位置：相对
和删除
边距：自动
是否符合您的要求

body, html {
  height: 100%;
}
.outer {
    background:red;
    min-height: 100%;
    position: relative;
}
.inner {
    position: relative;
    background:blue;
    box-sizing: border-box;  /* required if you're using padding */
    width: 60%;
    padding-top: 30%;
}


您可以将
height
设置为
auto
，将
minheight
设置为
100%
。也就是说，仅当
内部
div具有静态位置时

.outer {
    height: auto;
    background:red;
    min-height: 100%;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto; /* or 0 if you want to maintain its position in the upper-left corner */
    padding-top: 30%;
}

可以使用最小高度属性，它接受%
中的值否。我希望高度为100%，并覆盖所有窗口，实际上，我想要的高度是100%，最小高度变化基于内分区而不是窗口的大小通常高度是100%，当缩小时，高度不应小于内分区高度？是的，这是我想要的，高度是100%，但当垂直调整页面大小时，高度不能小于内分区如果该评论是针对我的，那么，是的，我确实调整了小提琴的尺寸，我知道你的问题是什么。但是没有CSS唯一的解决方案来设置w/h比率。如果删除绝对位置，问题是否存在？等等，如果内部div不是绝对位置，问题是什么？您只需将外部div设置为100%高度，就可以了problem@Huangism不是真的，如果你只将高度设置为100%，那么当内部超过视口的100%时，它不会随着内部拉伸。哦，我现在看到了，伙计，如果这个问题的结构更好的话，早就可以回答了。检查一下，如果窗口比内部div短，它就有问题了。发生了什么事？好吧，你总是可以将外部div设置为位置固定，基于这个例子，它也可以工作
.outer {
    background:red;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}

.outer {
    background:red;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}