use both height and min height, and both in percent

Question

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.

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

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

Here is the fiddle of my PROBLEM , http://jsfiddle.net/LmDNx/1/

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 : you can omit that position absolute

no. I want the height is 100% and cover all the window, actulay I want height is 100% and the min-height change base on inner div not the size of the window — zEn feeLo, Sep 17 '13 at 11:20
Normally height 100% and when shrunk the height shouldn't get lesser than inner div height? — Harry, Sep 17 '13 at 11:23
yesss that's what I want, the height 100% but when resize verticaly the page the height cant get lesse that inner div — zEn feeLo, Sep 17 '13 at 11:25
How tall can the `.inner` div get? What type of content, text or an image? Is there a height value for `.inner`? What happens if `.inner`'s height is initially taller than the view port height? — Marc Audet, Sep 17 '13 at 11:33
Marc if you read the upper comments u exactly know what what I mean , the content is text and image, and I change the size of content by percent, It cant be taller, I know it's possible, and also I knbow my problem can be dont via JS , but I want a css solution, I cant believe any css solution doesnt exist — zEn feeLo, Sep 17 '13 at 11:42
If I understand it correctly, you need to set a maximal and/or minimal w/h ratio of the `outer`, which is not doable in CSS only. — Jakub Kotrs, Sep 19 '13 at 14:33
did you resize the fiddle ? if you did you saw the inner div size changed based on percent, the outer div height is always 100% to cover the viewport or window, I want set a min-height for outer div, but not in pixel , exact to the size of the inner div, but inner div size changed on different window size, and I dont know how to set min-height, Look at the @Harry Comment, he fully got my problem — zEn feeLo, Sep 19 '13 at 14:39
If that comment was directed to me, then, Yes, I did resize the fiddle and I know what your probles is. But there is no CSS-only solution for setting a w/h ratio. — Jakub Kotrs, Sep 19 '13 at 14:41
does your issue even exist if you remove position absolute?? — Huangism, Sep 19 '13 at 14:48
Looks like I have to take that back. But if position absolute stays, there really is no solution. — Jakub Kotrs, Sep 19 '13 at 14:49
Just use image placeholder of the same ratio as your inner div, see my answer — Huangism, Sep 19 '13 at 14:51
the problem solved, the outer div should have min-height 100% and height: auto, with pure CSS — zEn feeLo, Sep 19 '13 at 14:55
@CameronA without the position absolute, what's the issue if you just set outer div to height 100%? — Huangism, Sep 19 '13 at 14:57
I Updated the question if you see I told you can omit the position absolute — zEn feeLo, Sep 19 '13 at 14:58
the problem is if I resize vertically the window height is always 100% if the windows is shorter than inner div, the inner div jump outside but outer div height stay 100% — zEn feeLo, Sep 19 '13 at 15:00

score 6 · Accepted Answer · answered Sep 19 '13 at 14:47

6

Demo

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

answered Sep 19 '13 at 14:47

Jakub Kotrs

5,823
1
14
30

wait, what's the issue if your inner div is not absolute? you can just set outer div to height 100% and there is no problem – Huangism Sep 19 '13 at 14:56
@Huangism Not really, if you set height to 100% only, then it doesn't stretch with the inner when inner is over 100% of viewport. – Jakub Kotrs Sep 19 '13 at 14:58
1

oh i see it now, man if this question was structured better it would of been answered long time ago – Huangism Sep 19 '13 at 15:01
check it http://jsfiddle.net/LmDNx/15/ it have problem if window is shorter than inner div what happend ? – zEn feeLo Sep 19 '13 at 15:02
1

Well you can always set the outer div to be position fixed, based on the example it works too http://jsfiddle.net/LmDNx/16/ – Huangism Sep 19 '13 at 15:04
thanks ,that's a good point, I know this question was very beginner for you :) but the answer is very important to me, that's why I started a bounty – zEn feeLo Sep 19 '13 at 15:14
__I doubt if it's _ok___ that after doing this, the body's height won't stretch more than the viewport's height anymore?! – aderchox Jul 17 '21 at 10:05
It usually is not a problem on itself, unless you have something that relies on real body height. In the question itself, body is set to 100%, so the problem is already in the question. However, since this answer is 8 years old, it would probably be different if written today. Eg. we now have viewport units that could be used in this case if we are talking about min height with regards to viewport: `min-height: 60vh`. – Jakub Kotrs Jul 22 '21 at 20:58

score 0 · Answer 2 · answered Sep 19 '13 at 14:42

If I understand your question correctly, does setting both to position: relative and removing the margin: auto meet your requirement?

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/

score 0 · Answer 3 · answered Sep 20 '13 at 12:29

0

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

min-height attribute can be used and it accepts value in %

answered Sep 20 '13 at 12:29

Sudharsun

741
6
23

score -1 · Answer 4 · answered Sep 24 '13 at 18:44

-1

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

answered Sep 24 '13 at 18:44

Ankit Agrawal

6,034
6
25
49

use both height and min height, and both in percent

4 Answers4

Linked