PranasLu's Blog

2010-03-01

CSS fullscreen div – 100% width 100% height web interface with scrolling content area

Filed under: Programming — Tags: , — pranaslu @ 12:00

UPDATE 2010-03-02

…100% width 100% height web interface with scrolling content area (Static C frame with dynamic Scrolling Porthole or SCFDSP for short) . All i wanted was a simple C frame that was static no mater how you resized the page with a scrolling content area inside the C frame. If all you want is a static height header, static width side menu, static height footer, with a scrolling dynamic content area please copy the code below…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>C frame Porthole</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        html, body
        {
            width: 100%;
            height: 100%;
        }
        #header-div
        {
            position: absolute;
            width: 100%;
            top: 0px;
            height: 40px;
            left: 0px;
            right: 0px;
            border: 0px solid #000;
        }
        #body-div
        {
            position: absolute;
            top: 41px;
            width: 100%;
            bottom: 21px;
            height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');
            border: 0px solid #FF0000;
        }
        #body-content-div
        {
            position: absolute;
            top: 0px;
            bottom: 0px;
            height: expression(document.compatMode=='CSS1Compat'? document.documentElement.clientHeight -61 +'px' : body.clientHeight -61 +'px');
            width: 100%;
            border: 1px solid #FF0000;
            overflow: auto;
        }
        #footer-div
        {
            position: absolute;
            width: 100%;
            bottom: 0px;
            height: 20px;
            left: 0px;
            border: 0px solid #000;
        }
    </style>
</head>
<body>
    <div id="header-div">
        This is the header container</div>
    <div id="body-div">
        <div id="body-content-div">
            TOP<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            content for scrolling div<br>
            BOTTOM
        </div>
    </div>
    <div id="footer-div">
        This is the footer</div>
</body>
</html>

Šaltinis: http://www.thefutureoftheweb.com/blog/100-percent-height-interface (kodas pateiktas komentaruose)

OLD POST

CSS:

/*give the body height:100% so that its child    elements can have percentage heights*/
body
{
    height: 100%;
}
/*this is what we want the div to look like*/
div.fullscreen
{
    display: block; /*set the div in the top-left corner of the screen*/
  
position: absolute;
    top: 0;
    left: 0; /*set the width and height to 100% of the screen*/
  
width: 100%;
    height: 100%;
    overflow:scroll;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div class="fullscreen">
      ...
    </div>
</body>
</html>

Šaltinis: http://www.andrewpeace.com/css-full-screen-div.html

2 Comments »

  1. Klaidą tame, kad kai prapleti langą 100% nebesuveikia! Turi div’ą height plėsti su javascript.

    Comment by Dainius — 2010-03-02 @ 08:54

    • Aha, kai reikėjo pridėt header ir footer, tai nebeišėjo.
      Bet paPOSTinau nauja sprendima.
      Pabandziau ant FF 3.5 ir IE7 – veikia. Raso, kad palaiko ir kitas narsykles ir net IE6.

      Comment by pranaslu — 2010-03-02 @ 12:12


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: