Lokin.S Lokin.S - 1 year ago 42
HTML Question

How to set height for the second div

i want to create 3 elements in three divs...

<div id="first" style="height:100px"></div> <!-- a bar with 100px -->
<div style="height:100% - 100px"> <!-- (not working)-->
<div id="second" style="height:50%"></div> <!-- not working-->
<div id="third" style="height:50%"></div> <!-- not working-->
html, body{
height: 100%;
margin:0 !important;
padding:0 !important;

However, it's not work.
how can i do it?

Answer Source

The first div is 100px height. The next div is 400px height. The second div is 50% of 400px height (200px) and the third div also 200px (50% of 400px).

<div id="first" style="height: 100px;background:red;width:100%"></div>
<div style="height: calc(500px - 100px);width:100%">
    <div id="second" style="height:50%;float:left;background:yellow;width:100%"></div>
    <div id="third" style="height: 50%;float:left;background:blue;width:100%"></div>