w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
flexible div height between flexible height header and footer div's

using calc from css3

the style:

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

.container{
    height: 100%;
    background-color: silver;
}
.container,.top, .bottom, .middle{
    display:block;
    clear:both;
    position: relative;
    width: 100%;
}
.top{
    height: 50px;
    width: 100%;
    background-color: red;
}

.bottom{
    height: 50%;
    position: relative;
    background-color: green;
}

.middle{
    background-color: blue;
    overflow: hidden;
    -webkit-height: calc(100%  -  100px);
    -moz-height: calc(100%  -  100px);
    height: calc(100%  -  100px);
}

the markup:

<div class="container">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

Demo: http://jsfiddle.net/YL4f3/1/





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.