Make a Div vertically fill its parent [duplicate] - html

Question

This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
I'm trying to get 2 divs to appear side by side in their parent and to both vertically fill the parent. I've tried setting height and min-height to 100% but I don't understand why its not working.
Here is my html:
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>
And CSS:
.calc-content {
display: inline-block;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
height:100%;
border: 1px solid red;
float: left;
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
And a JS Fiddle
Any help would be much appreciated.

Answer 1

You can use "the Flex powers"! ;)
.calc-content {
display: flex;
/*display: inline-block;*/
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
border: 1px solid red;
/*float: left;*/
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>

Answer 2

This is because the parent <div> has no defined height, so obviously, the children elements can't fill 100% of the parents' height.
Add a height to your parent's class calc-content, e.g. height: 200px;.
calc-content {
display: inline-block;
border: 3px solid blue;
width: 100%;
height: 200px;
border-color: #87B7CD;
}

Answer 3

One way is to use display: flex or display: inline-flex in your .calc-content rule.

Answer 4

Use display: flex on calc-content and keep the form element inside the fieldset element like shown below. Also need for float left now.
.calc-content {
display: flex;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
height: 100%;
border: 1px solid red;
}
.calc-form {
width: 60%;
}
fieldset {
width: 60%;
}
.calc-save {
width: 40%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content ">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<form id="cost_calculator">
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</form>
</fieldset>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>

Answer 5

Are you trying to do like this:
Removed height from .calc-form, .calc-save & modified .calc-content with
display: flex;
.calc-content {
display: flex;
border: 3px solid blue;
width: 100%;
border-color: #87B7CD;
}
.calc-form,
.calc-save {
border: 1px solid red;
float: left;
}
.calc-form {
width: 60%;
}
.calc-save {
width: 39%;
background-color: #87B7CD;
}
.calc-results {
float: left;
width: 60%;
}
<div class="calc-wrap clear">
<h2>Title</h2>
<div class="calc-content clear">
<div class="calc-form">
<form id="cost_calculator">
<fieldset>
<legend>
<h3>Find out how much your stuff costs you</h3>
</legend>
<ol>
<li class="one">
<label for="cost_of_pack">quantity</label>
<span class="pound-label">£</span>
<input type="number" id="cost_of_pack" name="cost_of_pack" value="0.0" min="0" step="0.10">
</li>
<li class="two">
<label for="quantity_smoked">How many per day?</label>
<input type="number" id="quantity_smoked" name="quantity_smoked" value="0">
</li>
</ol>
</fieldset>
</form>
</div>
<div class="calc-save">
<div class="calc-results-content clear">
<h3>Results</h3>
<div class="calc-results">
<div>
<p id="weekly_cost">£<span>0.00</span> per week</p>
<p id="monthly_cost">£<span>0.00</span> per month</p>
<p id="annual_cost" class="noborder">£<span>0.00</span> per year</p>
</div>
</div>
<div class="calc-quitnow">
<p>Well done</p>
</div>
</div>
</div>
</div>
</div>

Answer 6

.parentDiv {
height: 250px;
background: black;
display:flex;
}
.childDiv {
width:50%;
background: grey;
padding:10px;
border:1px solid black
}
<div class="parentDiv">
<div class="childDiv">
text1
</div>
<div class="childDiv">
text2
</div>
</div>