使用高度和最小高度，以及百分比 [英] use both height and min height, and both in percent

问题描述

当我同时使用height和min-height时，是否有一种方法可以根据CSS中的百分比设置最小高度？

Is there a way to set min-height based on percent in CSS ?

以百分比表示我正在寻找一种方法来控制最小高度，因为我的内容是基于百分比和高度的改变。

when I have used both height and min-height, I can't use both in percent I'm looking for a way to control min-height because my content is based on percent and the height of it changed.

我无法设置高度到自动，因为我需要的高度是100％，最小高度也是基于百分比。

I can't set the height to auto, because I need the height to be 100% and min-height is also based on percent.

这是页面的设计，它是全屏，直到最小高度，但在1400到1100的范围内页面是响应，并获得更小的百分比，我想保持这些比率，我的意思是高度100％，直到最小的具体高度，但由于我的内容高度改变我想

that is the design of page, It shoud be full screen , until the minimun-height, but in a range of 1400 to 1100 the page is responsive and get smaller by percent, and I wanna keep those ratio, I mean height 100% until the minimun specific height, but becuase my content height changing I want that specific minimun height is also change

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

这里是我的PROBLEM的小提琴， http://jsfiddle.net/LmDNx/1/

看到我想要设置外部div的最小高度作为内部div的大小，但内部div是基于百分比，也是高度是100％，什么可以最小高度是

as you can see I want to set the min hight for the outer div as the size of inner div, but the inner div is based on percent and also height is 100%, what can min-height be ??

UPDATE：您可以省略该位置。

推荐答案

演示

您可以设置 height 到自动和 min-height 到 100％ / code>。也就是说，只有 inner div具有静态位置。

You can set height to auto and min-height to 100%. That is, only if the inner div has static position.

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

这篇关于使用高度和最小高度，以及百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！