CSS how to make 100% height in this case

Question

So i have this construction as template, it work fine with full content on page and fork not fine if text or images dont fill all height, then columns and content div look cutted if i color their fields. index.html

 <!DOCTYPE html>
    <html>
     <head>
    <link rel="stylesheet" href="css/grad.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu.css">
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="header">
      <div align="center"><img src="img/tsu._e.png" border="0" align="middle"></div> 
    </div>
    <div id="gradient"></div>
    <div id="content">
        <div id="content1">
            <div id="content2">
                <div id="content3">
                    <div id="center">

                    </div>
                </div>
            <div id="left"></div>
        </div>
    </div>
    <div id="right"></div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

css:

* { margin:0px; padding:0px; }
html { height:100%; }
body { min-height:100%; position:relative; min-width:800px; }
* html body { height:100%; }
#header { background:#0000FF; height:100px; width:100%; }
#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden; }
#content1 { width:100%; float:left; margin-right:-180px; }
#content2 { background:#000000; margin-right:180px; }
#content3 { width:100%; float:right; margin-left:-200px; }
#left { background:#FFFFFF; width:200px; float:left; }
#center { background:#FFFF; margin-left:200px; }
#right { background:#FFFFFF; float:right; width:180px; }
#min_width { width:800px; }
#footer { position:absolute; bottom:0px; background:#0000FF; width:100%; height:60px; }

gradien hight 3px

Question: why div with id=content dont fill 100% height? and how repair it in this case?

possible guidance: [Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Mar 17 '16 at 00:43

score 3 · Accepted Answer · edited Mar 17 '16 at 01:41

3

Instead of

height:100%;

use

height:100vh;

edited Mar 17 '16 at 01:41

Nic

6,211
10
46
69

answered Mar 16 '16 at 19:42

MSH

297
1
3
12

Please explain why this answers the question. That is, what does the change you suggested do? What effect does it have? – Nic Mar 17 '16 at 01:41

score 1 · Answer 2 · answered Mar 16 '16 at 19:13

Seems you don't have 100% in #content

#content { width:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;

try

#content { height:100%; padding-bottom:60px; width:expression(document.body.clientWidth > 805 ? "100%" : "805px"); overflow:hidden;

and you have all the inner div empty

score 0 · Answer 3 · answered Mar 16 '16 at 20:02

0

take of the position relative of your body and give a height: 100% to your content

answered Mar 16 '16 at 20:02

CodeWeis

846
6
19

CSS how to make 100% height in this case

3 Answers3