Question

有没有办法根据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％，最小高度是什么？

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

Answer 1

Demo

您可以将height设置为auto，将min-height设置为100%。也就是说，只有inner 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%;
}

Answer 2

如果我正确理解您的问题，是否同时设置position: relative并删除margin: auto符合您的要求？

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%;
}

http://jsfiddle.net/LmDNx/1/

Answer 3

.outer {
    height: auto;
    min-height: 100%;
}
.inner {
    box-sizing: border-box;
    width: 60%;
    margin: auto; 
    padding-top: 30%;
}

可以使用

min-height属性，它接受％

中的值

Answer 4

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

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

4 个答案: