Geek Answers Handbook

Full Screen Website in CSS / HTML

I am working on a website design for a chat site, but every attempt that I make to fix has still failed. I tried to do this using tables, it always failed in one browser (more often IE tho), divs and more.

The website should be full screen, with a minimum width of 900 and a minimum height: 500 pixels, so it will not be reduced. I want to do this without javascript (I did it in JS, but this needs to be done without it: <)

Here is an image of how it should look.

http://imgur.com/2qHen

I hope this is possible in pure CSS / HTML

Thanks in advance

EDIT

I worked in Firefox + Chrome, but IE decides not to follow any rule ...

<html>
 <head>
 <style type="text/css">
  body{
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
  }
 </style>
 </head>
 <body>

 <div style="height: 100%; width: 100%;">
  <div style="position: relative; height: 100%; width: 100%; background-color: gray; min-width: 900px; min-height: 500px;">
   <div style="position: absolute; height: 30px;left:0px; right: 300px ; background-color: yellow; bottom: 0;">
    Input
   </div>

   <div style="position: absolute; height: 200px; width:300px; right: 0px;  background-color: green; bottom: 0;">
    ad
   </div>

   <div style="position: absolute; bottom: 200px; width:300px; right: 0px; top: 20px;  background-color: blue;">
    online
   </div>
   <div style="position: absolute; width:300px; right: 0px; top: 0px; height: 20px;  background-color: red;">
    online menu
   </div>
   <div style="position: absolute; right: 300px; top: 0px; left: 0px; height: 20px;  background-color: yellow;">
    tabs
   </div>
  </div>
 </div>
 </body>

</html>
+5
source share
3 answers

, ;

-, : CSS IE, -, , . "IE Hack" ( #) , IE.

:

html
{
   background: #F00 ;
   #background: #0F0 !important ;
}

, IE .

-, min-width min-height? ( ​​IE6 , ) . () 100%, html body (, )

html, body {
   width: 100% ;
   height: 100% ;
   min-width: 900px ;
   min-height: 500px ;
}

, ( body) div (, ), .

, , , overflow html/body, . , , , .

, !

EDIT:

, !:]

, divs , ( , ):

<body>
<div id="page">
    <div id="right">
        <div class="thirty">Top bar</div>
        <div class="tall">Middle bar</div>
        <div id="rt_bot">Bottom bar</div>
    </div>
    <div id="left">
        <div class="thirty">Left Top Bar</div>
        <div class="tall">Left Mid Bar</div>
        <div id="lf_bot">Left Bottom Bar</div>
    </div>
    <div id="container"></div>
</div>
</body>

CSS:

html, body {
    width: 100% ;
    height: 100% ;
    min-height: 500px ;
    min-width: 900px ;
    margin: 0px ;
}

div#page {
    height: 100% ;
}

div#right {
    float: right ;
    height: 100% ;
    width: 300px ;
}

div#rt_bot {
    height: 200px ;
}

div#left {
    float: left ;
}

.thirty {
    height: 30px ;
}

.tall {
    height: 100% ;
}

div#lf_bot {
    height: 50px ;
}
+6

. , CSS javascript/jQuery.

.

0

As a rule, I do not like to use tables, but the problem with automatic height makes me turn to this ...

Works with IE8, it may not work on IE6, though ... Nothing really works with IE6, so don't worry.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Untitled</title>
    <style type="text/css">

html, body {width: 100%; height: 100%; margin: 0 0 0 0; padding: 0 0 0 0; }
table#content {min-width: 900px; min-height: 500px; width: 100%; height: 100%; border-collapse: collapse; }
table#content td {border: 1px solid black; }
table#content td.topLeft {height: 30px; }
table#content td.topRight {width: 300px; height: 30px; }
table#content td.bottomLeft {height: 30px; }
table#content td.bottomRight {width: 300px; height: 200px; }
table#content tr.spacing {height: 170px; }

    </style>
  </head>
  <body>
    <table id="content">
      <tr>
        <td class="topLeft">Top Left</td>
        <td class="topRight">Top Right</td>
      </tr>
      <tr>
        <td class="centerLeft" rowspan="2">Center Left</td>
        <td class="centerRight">Center Right</td>
      </tr>
      <tr class="spacing">
        <td class="bottomRight" rowspan="2">Bottom Right</td>
      </tr>
      <tr>
        <td class="bottomLeft">Bottom Left</td>
      </tr>
    </table>
  </body>
</html>
0
source

More articles:


All Articles