上一篇: css3 – 应用转换：悬停不：活动下一篇:css – 表单字段在div内部时不在...

css – 同时使用高度和最小高度,均以百分比表示

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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%;
}

这是我的问题,http://jsfiddle.net/LmDNx/1/的小提琴

你可以看到我想把外部div的最小高度设置为内部div的大小,但内部div基于百分比,高度也是100％,最小高度是多少？

更新：你可以省略该位置绝对

解决方法

@L_772_1@

您可以将高度设置为自动,将最小高度设置为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%;
}