Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: 100% width and height

Bottom of Page

1 to 9 of 9

  1.  
    • CommentAuthorGustavs
    • CommentTimeDec 14th 2005
     permalink
    Hey, I'm still new to CSS and I wanted to ask - how do I make a 100% width and 100% height, so that it covers all the screen? I wanted to use this one but it's not working, as I wish :/

    #maincage {
    position:relative;
    width:100%;
    height:100%;
    border-top: 15px solid #4d849a;
    border-bottom: 15px solid #4d849a;
    }
    • CommentAuthorArun
    • CommentTimeDec 14th 2005 edited
     permalink
    Hey Gustavs. I think this is not possible in Div, if yes forgive me, but u can make with table

    #html, body, table {
    width:100%;
    height:100%;
    }
    • CommentAuthorGustavs
    • CommentTimeDec 14th 2005
     permalink
    Well, then it turns out that it's bigger than 100% :/
    •  
      CommentAuthordroppyale
    • CommentTimeDec 14th 2005
     permalink
    if I'm not mistaken, it can be acomplished this way:

    html {
    height: 100%;
    }

    body {
    height: 100%;
    }

    #maincage {
    position:relative;
    width:100%;
    min-height:100%;
    border-top: 15px solid #4d849a;
    border-bottom: 15px solid #4d849a;
    }

    * html #maincage { /* Should be included via Conditional Comment for IE */
    height: 100%;
    }



    Give that a try...
    • CommentAuthorGustavs
    • CommentTimeDec 14th 2005
     permalink
    The full CSS:

    html {
    background-color: #faa73f;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#9d9d9d;
    text-decoration: none;
    height:100%;}


    body {
    height: 100%;
    margin: 0px;
    }

    #maincage {
    position:relative;
    width:100%;
    min-height:100%;
    border-top: 15px solid #4d849a;
    border-bottom: 15px solid #4d849a;
    }

    * html #maincage { /* Should be included via Conditional Comment for IE */
    height: 100%;
    }

    But try yourself it's not 100% height, it more.

    Hmm, maybe there is some alternative?
    • CommentAuthorGustavs
    • CommentTimeDec 14th 2005 edited
     permalink
    If I take off those borders, then it's working. But I need them.

    Edit:

    I changed it to height: 97%; and it's working fine now. Thank you. :)
    •  
      CommentAuthordroppyale
    • CommentTimeDec 14th 2005
     permalink
    it does work... u need to style body not html

    html {
    height: 100%;
    }

    body {
    height: 100%;
    background-color: #faa73f;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#9d9d9d;
    text-decoration: none;
    }

    #maincage {
    position:relative;
    width:100%;
    min-height:100%;
    border-top: 15px solid #4d849a;
    border-bottom: 15px solid #4d849a;
    }

    * html #maincage { /* Should be included via Conditional Comment for IE */
    height: 100%;
    }
    •  
      CommentAuthordroppyale
    • CommentTimeDec 14th 2005
     permalink
    Ok.. glad to help, good luck
  9.  permalink
    Hello,
    I just tried this method and it works great...

    However... when I put content inside of the maincage and reduce the height of my browser.... the content inside the maincage hangs out over the edge of the main cage, so there is empty white space below the maincage with the content hanging over it.

    Is there anyway to get the maincage to always be 100% even on a browser resize?


    Here is my CSS:

    html {
    height: 100%;
    }
    body {
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    text-align: center;
    color: #fff;
    background-color: #fff;
    }
    a {
    text-decoration: none;
    font-weight: bold;
    color: #ccc;
    outline: none;
    }
    a:visited {
    color: #ccc;
    }
    a:active {
    color: #ccc;
    }
    a:hover {
    color: #ccc;
    text-decoration: underline;
    }
    p {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: justify;
    }

    li {
    color: #000;
    margin-bottom: 20px;
    }

    /* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/

    h1 {
    font-size: 24px;
    line-height: 44px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
    img {
    border: 10px #000 solid;
    margin: 10px;
    }
    #content {
    float: left;
    background-image: url(bg.jpg);
    background-repeat: repeat;
    padding: 10px;
    margin: 10px;
    width: 400px; /* ie5win fudge begins */
    width: 370px;
    overflow: hidden;
    }
    html>body #content {
    width: 370px; /* ie5win fudge ends */
    }

    #secondbox {
    float: right;
    padding: 10px;
    margin: 20px;
    background: #99FFCC;
    border: 5px solid #000;
    width: 100px;
    }
    #container {
    height: 100%;
    background-color: #FF9966;
    margin: 0 auto;
    width: 760px;
    text-align: left;
    overflow: display;
    }
    * html #container { /* Should be included via Conditional Comment for IE */
    height: 100%;
    }








    Here is my 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" xml:lang="en" lang="en">
    <head>
    <title>CSS Test</title>
    <link rel="stylesheet" href="fouc.css" type="text/css" media="all" />
    <style type="text/css" media="all">@import url("style.css");</style>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>

    <div id="container">

    <div id="content">
    <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut velit pede, posuere sed, consequat in, placerat vitae, est. Pellentesque eros lectus, porta et, consectetuer tempor, consequat non, metus. Cras aliquam, augue porttitor sodales lobortis, mauris nibh eleifend augue, quis pulvinar nunc dolor id mi. Nullam imperdiet. Quisque quam. Pellentesque tellus augue, viverra non, volutpat quis, molestie vitae, dolor. Nulla facilisi. Ut arcu ipsum, faucibus a, feugiat vitae, egestas id, est. Aenean volutpat venenatis dolor. Curabitur eget enim imperdiet magna congue bibendum. Vivamus tempus dui ac dolor. Sed eleifend adipiscing lacus. Nam mattis libero ac dui. Nullam sollicitudin nulla. Vestibulum massa turpis, vehicula nec, vehicula ut, laoreet et, sapien. Integer sem pede, commodo quis, convallis in, vulputate in, ipsum. </P>
    <div id="secondbox">
    <ul>
    <li>this is a bullet list</li>
    <li>this is a second bullet item</li>
    </ul>
    </div>
    <P>Sed quis massa in turpis mollis tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras nec lorem. Nulla ipsum ipsum, faucibus auctor, placerat at, sodales ut, libero. Fusce aliquam pretium nisi. Ut porta ornare nibh. Vestibulum quis urna sed quam accumsan varius. Curabitur faucibus aliquet massa. Cras rutrum suscipit pede. Praesent commodo enim suscipit arcu. Morbi eu libero. </P>
    </div>

    <img src="image.jpg" width="175" height="181" / alt="this is an image">
    </div>


    </body>
    </html>

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page