CODEWITHSUNDEEP
htmlcss
Nick Nikolaev
Nick Nikolaev

Reputation: 141

CSS how to make 100% height in this case

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?

Upvotes: 1

Views: 911

Answers (3)

MSH
MSH

Reputation: 297

Instead of

height:100%;

use

height:100vh;

Upvotes: 3

CodeWeis
CodeWeis

Reputation: 856

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

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133400

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

Upvotes: 1

Related Questions