CODEWITHSUNDEEP
htmlcss
Bosiwow
Bosiwow

Reputation: 2193

Dividing div height over child elements

I am doing some html and css.

I'm currently having a problem with a div that contains fieldsets. I want my fieldsets to fill the entire div's height. So if my div is 300px high, both fieldsets should take 150px. I don't want my div to have a fixed height. I also don't want to work with position: absolute.

I made a jsfiddle

As you can see there is an empty space at the end of the div. I want the fieldsets to take up all that empty space.

This is my code:

<div id="thediv">
    <legend>somefieldset</legend>
    <fieldset id="one">
        <input type="text" value="input1">
        <input type="text" value="input2">
    </fieldset>
    <legend>somefieldset2</legend>
    <fieldset id="two">
        <input type="text" value="input3">
    </fieldset> 
</div>

#thediv{
    min-height: 300px;
    border: 1px black solid; 
    width: 50%;
}

#one,#two{
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}

I hope my question is clear. If it isn't, leave a comment.

Upvotes: 0

Views: 76

Answers (2)

austinthedeveloper
austinthedeveloper

Reputation: 2601

I understand you don't want to use absolute and relative positioning but just look at this fiddle first.

http://jsfiddle.net/pynhA/138/

This uses relative and absolute positioning. The trick to making it responsive is adding a padding-bottom to the overall container: 

#thediv {
    border:1px black solid;
    width:50%;
    padding-bottom:50%;
    background: red;
    position: relative;
}

This trick is incredibly useful when trying to maintain aspect ratios for videos or divs with background images.

Upvotes: 1

Mathias
Mathias

Reputation: 5672

Have you tried using display: flex? It is supported in Chrome, Firefox and IE10+ with vendor prefixes and a slightly different syntax in IE10.

Read more about how to use display: flex here: MDN Using CSS flexible boxes

DEMO

#thediv{
    min-height:300px;
    border:1px black solid; 
    width:50%;
    display: flex;
    flex-direction: column;
}

#one,#two{
    flex: 1;
    margin:0;
    padding:0;
    float:left;
    width: 100%;
}

Upvotes: 1

Related Questions