[Solved] 3 row div with 100% height content always

by


Using this as your markup:

<div id="wrapper">
    <div id="header">HEADER</div>
    <div id="content">
        <iframe class="appcont" src="" width="100%" height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe>
    </div>
    <div id="footer">hi</div>
</div>

and this as your CSS:

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

#wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

#header {
    height: 40px;
    background-color: green;
    color: #fff;
}

#content {
    position:absolute;
    bottom:40px;
    top: 40px;
    width:100%;
    overflow: auto;
    background-color: #333;
    color: #666;
}

#footer {
    height: 40px;
    width:100%;
    position:absolute;
    bottom:0;
    background-color: blue;
    color: #fff;
}

Does that get you on your way?

0

solved 3 row div with 100% height content always