6

有没有办法根据 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%，最小高度可以是多少？

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

4

4 回答 4

6

演示

您可以设置height为auto和min-height。100%也就是说，仅当innerdiv 具有静态位置时。

.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%;
}
于 2013-09-19T14:47:05.633 回答
0

如果我正确理解您的问题，设置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/

于 2013-09-19T14:42:20.343 回答
0 
.outer {
    height: auto;
    min-height: 100%;
}
.inner {
    box-sizing: border-box;
    width: 60%;
    margin: auto; 
    padding-top: 30%;
}

可以使用min-height 属性，它接受以 % 为单位的值

于 2013-09-20T12:29:54.003 回答
-1 
.outer {
    background:red;
}
.inner {
    background:blue;
    box-sizing: border-box;
    width: 60%;
    margin: auto;
    padding-top: 30%;
}
于 2013-09-24T18:44:29.653 回答