CODEWITHSUNDEEP
htmlcss
Doan Cuong
Doan Cuong

Reputation: 2624

Div height fill container with margin

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.

Upvotes: 0

Views: 6194

Answers (3)

The Mechanic
The Mechanic

Reputation: 2329

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

Upvotes: 1

Nitesh
Nitesh

Reputation: 15749

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.

Upvotes: 2

fatima Na
fatima Na

Reputation: 72

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

Upvotes: 1

Related Questions