Home/ Questions/Q 6184301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:30:52+00:00

i have a mind bobbling question. I need a 100% width, 100% height container

  • 0

i have a mind bobbling question.

I need a 100% width, 100% height container with 20px margin that expands with content. Is this at all possible? The closest i got was with this method:

#container {
    position:absolute;
    top:0;
    bottom:0px;
    left:0;
    right:0;
    margin:20px;
}

but then it wont expand in height with content.

Anybody know the divine technique for this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’m pretty sure it isn’t possible to do with a single element, but if you don’t mind having 3 spacer div elements, this solution works in all browsers:

    <html>
<head>
<style type="text/css">
* {
    margin: 0;
}
html, body {
    height: 100%; padding: 0; /* padding 0 is for jsfiddle */
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: -20px; /* the bottom margin is the negative value of the spacer height */
    background-color: #ccc;
}
.spacer.edge {
    background-color: white; /* same as body background */ 
}
.spacer {
    height: 20px;
 }

</style>
</head>
<body>
    <div id="wrapper">
        <div class="spacer edge"></div>
        <!-- content here -->
        <div class="spacer"></div>
    </div>
    <div class="spacer edge"></div>
</body>
</html>

    Here’s a fiddle to play with: http://jsfiddle.net/dTyTW/

    • 0