Full height DIV


Hi All,
 I've refering and Google-ed a lots of web page and tested lots of time, I still couldn't get my DIV to show 100% height regardless the content. My page only have banner, body and footer. Could someone show me a correct css and html for that matter? I'm using IE7, IE8 and Chrome to test, only IE7 works.
 Thanks in advanced
1
stephensaw
5/4/2009 6:22:34 PM
📁 asp.net.client-side
📃 24353 articles.
⭐ 2 followers.

💬 4 Replies
👁️‍🗨️ 4653 Views



I d'ont if this way you did it, i can only test it with IE7 and firerfox
CSS
  
html, body { 
height 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        
} 


#main-container { 
        height:100%;  
        background-image: url(../images/repeate_left.jpg);
        background-repeat: repeat-y;
        leftmargin:0;
        topmargin=:0;
        marginwidth:0;
        marginheight:0;
        border:1px solid #000; 
        width:780px;
} 

In html
<div id="main-container">
</div> 
 

If this post is answer of your question then don't forgot to Click Mark As Answer
-1
lucsky8
5/4/2009 7:11:42 PM

Hi,
 Thanks for the reply. But it do only works with IE7. What is the repeating image purpose?
-1
stephensaw
5/5/2009 12:36:18 AM

Hi stephensaw,
There is no clean CSS which make div height 100% to page. You need to do some CSS hack.
But as far as I understood and experience, people offen find their way to make the div 100% but later find some popluar problem like positioning the footer at the bottom of the page. What I would do is to use table with height 100% with header, body and footer cell. and then after use div inside it.
Though you want to use div structure then refer this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>One Hundred Percent height divs</title>
<style type="text/css" media="screen">
/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
html,body {margin:0;padding:0}
#outer{min-height:100%;height:auto;background:#ffffcc;border:1px solid red}
* html #outer{height:100%;border:1px solid red}/* ie6 and under*/
</style>
</head>
<body>
<div id="outer">
</div>
</body>
</html> 

Please mark as Answer if it helps u. Thanks!

Parth Patel
Techsture Technologies
Software Developer
Ahmedabad
-1
Coool
5/5/2009 4:45:57 AM

You can use javascript
<script type = "text/javascript">
    function BcgDiv()
    {
        var bcgDiv = document.getElementById("divBackground");
        if (bcgDiv != null)
        {
            if (document.body.clientHeight > document.body.scrollHeight)
            {
                bcgDiv.style.height = document.body.clientHeight  + "px";
            }
            else
            {
                bcgDiv.style.height = document.body.scrollHeight  + "px";
            }
            bcgDiv.style.width = "100%";
        }
     }
        window.onload = BcgDiv;
</script>
<div id = "divBackground" style=" position:absolute; top:0px; left:0px;width:0px;height:0px;background-color:#eee; z-index:100;opacity: 0.8;filter:alpha(opacity=60); -moz-opacity: 0.8; overflow:hidden ">


            
MAK Mark as Answer if this reply helps you
MVP ASP/ASP.Net ASP.Net Hosting : Host Depot My Site : ASPSnippets
-1
mudassarkhan
5/5/2009 5:29:29 AM
Reply: