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:

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

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

    height: 50%;
    position: relative;
    background-color: green;

    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>

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

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