Div height fill container with margin

Question

Take a look at my html and css:

html , body{
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;    
}

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
}

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
}

HTML:

<body>
    <div class="wrapper">
        <div class="content">

        </div>
    </div>
</body>

My wrapper div on default take window width and window height as its size. I want my content div always fill wrapper height and keep its margin, the problem is I can't set content div's height = 100% because it has margin, and will make wrapper div overflow. Here is my jsfiddle

Edit

Example to clarify the question:

Assume that div.wrapper's height = 200px

div.content's height will be 200 - (10 + 20) = 170px

I know I can do this by jquery but I want to find a solution with html/css

Note: div.wrapper's height depend on user screen resolution.

SOLVE

Thanks for your guys attention! I really appreciate it. And I found the solution here by using css3 calc function. I think this information will helpful to you.

sorry i don't really get your question, can't you just remove the margin? — Raver0124, May 16 '13 at 03:55
I want to keep the margin. That's why I can't set `content div`'s height = 100%. And about the question. Let me clarify it by example. Assume that `wrapper div`'s height = 200px, so `content div`'s height = 200 - (10 + 20) = 170px. I can do it by jquery on page load but I want to achieve it by pure html/css — Doan Cuong, May 16 '13 at 03:59
have you tried floating the div so that it fills in its parent element? — oshikryu, May 16 '13 at 04:06
something like div.content{ float:left; }. That should fill the parent class if you don't specify a width. Then you can add margins — oshikryu, May 16 '13 at 04:30
Maybe you misunderstood, I want to fill the height, not the width — Doan Cuong, May 16 '13 at 04:31
There is a css proeprty call Border-Box which solves your issue, but for some reason i can't apply to your jsfiddle page. ref 1: http://compass-style.org/examples/compass/css3/box_sizing/ ref 2: http://quirksmode.org/css/user-interface/boxsizing.html — Raver0124, May 16 '13 at 04:36

score 2 · Answer 1 · answered May 16 '13 at 04:54

Here is the Solution.

The HTML:

<body>
    <div class="wrapper">
        <div class="content">

        </div>
    </div>
</body>

The CSS:

html , body{
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;    
}

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
}

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
    height:inherit;
    overflow:auto;
    background:blue;
    width:auto;
}

The issue was in the content class. If you want the content div wrap the height of wrapper div, a height:inherit; has to be specified which inherits the height of its parent div.

Hope this helps.

The Mechanic · Accepted Answer · 2013-05-16T05:07:03.007

Check this fiddle http://jsfiddle.net/sarfarazdesigner/T7D32/9/

updated fiddle http://jsfiddle.net/sarfarazdesigner/T7D32/13/

i have done some minor changes in your css code here is

html , body{
    width: 100%;
    height: 100%;
    margin: 0;    
}

.wrapper {
    background: -webkit-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -o-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -ms-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: -moz-linear-gradient(top, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    background: linear-gradient(to bottom, rgb(193, 112, 39) 0%, rgb(243, 141, 49) 20%, rgb(203, 119, 41) 99%);
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow: auto;
    padding:10px 0 20px 0;
}

.content {  
    margin:0 auto;
    width: 724px;
    border: black 1px solid;
    height:100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

it will work let me know if you have any problem

There's one problem. When you set `height: 100%`, content div overflow and I don't want that behavior. I want it fit inside parent without overflow — Doan Cuong, May 16 '13 at 05:00
@DoanCuong because you are using `border` for this you can use `border-box` property and it will work — The Mechanic, May 16 '13 at 05:04

score 1 · Answer 3 · answered May 16 '13 at 04:41

1

change the .content class css like this, your problem will be solved.

.content {  
    margin: 10px auto 20px auto;
    width: 724px;
    border: black 1px solid;
     overflow: auto;
    height: 100%
}

answered May 16 '13 at 04:41

fatima Na

72
1
12

Div height fill container with margin

3 Answers3