100% min-height div with margin and no scrollbars?

Discussion in 'HTML' started by Ciaran, Jun 16, 2009.

  1. Ciaran

    Ciaran Guest

    Hi, Is there any way to resolve this? I want a 12px space around the
    edge of the page (for a body background pattern) but the central div
    needs to be minimun 100% height without creating a vertical scrollbar
    (until one is needed). Here's what I got but the padding -12px doesn't
    work....

    <html>
    <head>
    <style>
    * {margin: 0;}
    html, body {
    height: 100%;
    }
    #greybox {
    min-height: 100%;
    margin:12px;
    padding:-12px;
    background-color:#CCC;
    }

    </style>
    </head>
    <body>
    <div id="greybox">
    <p>content here</p>
    </div>
    </body>
    </html>


    Thanks a lot!
    Ciarán
     
    Ciaran, Jun 16, 2009
    #1
    1. Advertising

  2. On 16 Jun., 03:20, Ciaran <> wrote:
    > Hi, Is there any way to resolve this? I want a 12px space around the
    > edge of the page (for a body background pattern) but the central div
    > needs to be minimun 100% height without creating a vertical scrollbar
    > (until one is needed). Here's what I got but the padding -12px doesn't
    > work....
    >
    > <html>
    > <head>
    > <style>
    > * {margin: 0;}
    > html, body {
    >         height: 100%;}
    >
    > #greybox {
    >         min-height: 100%;
    >         margin:12px;
    >         padding:-12px;
    >         background-color:#CCC;
    >
    > }



    Like this?:

    #greybox {
    position:absolute;
    top:12px;
    bottom:12px;
    left:12px;
    right:12px;
    background-color:#CCC;
    }



    > </style>
    > </head>
    >  <body>
    >         <div id="greybox">
    >              <p>content here</p>
    >          </div>
    >      </body>
    > </html>
    >
    > Thanks a lot!
    > Ciarán
     
    Jan C. Faerber, Jun 16, 2009
    #2
    1. Advertising

  3. Ciaran

    cronoklee Guest


    > Like this?:
    >
    > #greybox {
    >         position:absolute;
    >         top:12px;
    >         bottom:12px;
    >         left:12px;
    >         right:12px;
    >         background-color:#CCC;
    >
    > }




    Very clever! Really close but is there a way to make it expand when
    the content of the div is larger than the page height??

    Thanks a lot!
    Ciarán
     
    cronoklee, Jun 16, 2009
    #3
  4. Ciaran

    GTalbot Guest

    On 15 juin, 21:20, Ciaran <> wrote:
    > Hi, Is there any way to resolve this? I want a 12px space around the
    > edge of the page (for a body background pattern) but the central div
    > needs to be minimun 100% height without creating a vertical scrollbar
    > (until one is needed). Here's what I got but the padding -12px doesn't
    > work....


    >

    (...) a way to make it expand when
    the content of the div is larger than the page height??
    >


    >
    > <html>


    No doctype declaration. Very important to declare one which will
    trigger standards compliant rendering mode in all modern browsers.

    > <head>
    > <style>
    > * {margin: 0;}


    You're removing margin on all elements, even those which can not have
    a margin and then you're looking for restoring a normal margin for
    those elements who have by default a margin. This is the source of
    your problem. With browsers (IE8, Firefox 3.x, Opera 9+, Safari 4.x,
    Konqueror 4.x) all sharing the same browser defaults, there is no need
    (never was either) to reset all elements.

    > html, body {
    > height: 100%;}
    >
    > #greybox {
    > min-height: 100%;
    > margin:12px;
    > padding:-12px;


    padding can not be negative.

    > background-color:#CCC;
    >
    > }
    >
    > </style>
    > </head>
    > <body>
    > <div id="greybox">
    > <p>content here</p>
    > </div>
    > </body>
    > </html>
    >
    > Thanks a lot!
    > Ciarán


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">

    <html>

    <head profile="http://www.ietf.org/rfc/rfc2731.txt">

    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="Content-Style-Type" content="text/css">

    <style type="text/css">
    html {height: 100%;}

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

    #greybox
    {
    background-color:#CCC;
    color: black;
    height: auto;
    max-height: 100%;
    overflow: auto;
    padding: 1em;
    }
    </style>
    </head>
    <body>
    <div id="greybox">
    <p>content here</p>
    </div>
    </body>
    </html>

    That way, the grey box will expand as intrinsec content makes it
    taller until available (horizontal and vertical) space from body
    element runs out, until computed space given from max-height is
    reached.

    Gérard
    --
    Internet Explorer 7 bugs: 175 bugs so far
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
    Internet Explorer 8 bugs: 49 bugs so far
    http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
     
    GTalbot, Jun 23, 2009
    #4
  5. Ciaran

    dorayme Guest

    In article
    <>,
    GTalbot <> wrote:

    > On 15 juin, 21:20, Ciaran <> wrote:
    > > Hi, Is there any way to resolve this? I want a 12px space around the
    > > edge of the page (for a body background pattern) but the central div
    > > needs to be minimun 100% height without creating a vertical scrollbar
    > > (until one is needed). Here's what I got but the padding -12px doesn't
    > > work....

    >
    > >

    > (...) a way to make it expand when
    > the content of the div is larger than the page height??
    > >

    ....
    > > * {margin: 0;}

    >
    > You're removing margin on all elements, even those which can not have
    > a margin


    Is removing a margin on elements which can not have
    margins like putting wings on pigs? Or is it like something quite else?
    >

    ....
    >

    ....
    > html {height: 100%;}
    > body {height: 100%; margin: 12px;}
    > #greybox
    > {
    > background-color:#CCC;
    > color: black;
    > height: auto;
    > max-height: 100%;
    > overflow: auto;
    > padding: 1em;


    > <div id="greybox">
    > <p>content here</p>
    > </div>

    ....
    >


    does not address the concern of the OP.

    --
    dorayme
     
    dorayme, Jun 24, 2009
    #5
  6. Ciaran

    GTalbot Guest

    On 23 juin, 19:06, dorayme <> wrote:
    > In article
    > <>,
    >
    >
    > ...
    > > > * {margin: 0;}

    >
    > > You're removing margin on all elements, even those which can not have
    > > a margin

    >
    > Is removing a margin on elements which can not have
    > margins like putting wings on pigs? Or is it like something quite else?


    It is like putting wings on pigs and ... on a lot of pigs. It can end
    up to dozens and dozens of pigs. This kind of bad coding practice
    * {margin: 0;}
    is often seen and it is insiduous as you later see in the code padding
    declarations and margin declarations which would never be needed to
    begin with if the web author had not declared
    * {margin: 0;}
    [addendum: Sometimes, such resetting of margins is due to the
    ignorance of adjoining margin collapsing and its buggy implementation
    in IE 6 and IE 7: the bugs were fixed in IE 8.]

    So, that coding practice puts wings on dozens of pigs and then the
    author methodically remove wings on dozens of pigs later in the same
    stylesheet. I've seen this many times. A reset stylesheet is a bad
    idea, very bad idea. It bloats the code, it misunderstands what is
    cascading stylesheet, it defeats at least 2 goals of stylesheet (code
    being light, avoid repeating, code reusability, helping code
    maintenance)
    CSS design principles
    http://www.w3.org/TR/CSS21/intro.html#design-principles

    Default CSS property values are useful; default values are not bad,
    are not things web authors should be fighting, neutralizing,
    exterminating ... at least in recent/latest versions of mainstream
    browsers (IE 8, Firefox 3, Opera 9, Safari 4, Konqueror 4).

    > ...
    > > html {height: 100%;}
    > > body {height: 100%; margin: 12px;}
    > > #greybox
    > > {
    > > background-color:#CCC;
    > > color: black;
    > > height: auto;
    > > max-height: 100%;
    > > overflow: auto;
    > > padding: 1em;
    > > <div id="greybox">
    > > <p>content here</p>
    > > </div>

    > ...
    >
    > does not address the concern of the OP.


    Well, I thought it would but later realized it didn't. I would need to
    spend more time on this...

    Gérard
    --
    Internet Explorer 7 bugs: 175 bugs so far
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
    Internet Explorer 8 bugs: 49 bugs so far
    http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
     
    GTalbot, Jun 24, 2009
    #6
  7. Ciaran

    dorayme Guest

    In article
    <>,
    GTalbot <> wrote:

    > On 23 juin, 19:06, dorayme <> wrote:
    > > In article
    > > <>,
    > >
    > >
    > > ...
    > > > > * {margin: 0;}

    > >
    > > > You're removing margin on all elements, even those which can not have
    > > > a margin

    > >
    > > Is removing a margin on elements which can not have
    > > margins like putting wings on pigs? Or is it like something quite else?

    >
    > It is like putting wings on pigs and ... on a lot of pigs.


    ....
    >
    > Default CSS property values are useful; default values are not bad,
    > are not things web authors should be fighting, neutralizing,
    > exterminating ... ...


    That is for sure! And the reason is that it took lot of work by a lot
    intelligent people to get the system of defaults up in the first place.
    Often a bad idea to reinvent the wheel.

    Nevertheless, it is an excellent or at least a harmless thing to do
    *sometimes* - e.g. if only a handful of elements are used. in a simple
    page. It is also not a bad rough diagnostic tool, to be used temporarily.


    >
    > > ...
    > > > html {height: 100%;}
    > > > body {height: 100%; margin: 12px;}
    > > > #greybox

    ....
    > > ...
    > >
    > > does not address the concern of the OP.

    >
    > Well, I thought it would but later realized it didn't. I would need to
    > spend more time on this...
    >

    Good luck, but don't spend too much time on it, it is likely not
    possible without scripting. I would be pleased to be wrong about this
    and have been meaning to come back to this rather interesting OP
    request. It is easy to see what he really wants! And he would not want
    the effect that is given by one abs position solution offered at the
    time. The grey did not extend when scrolling happened.

    --
    dorayme
     
    dorayme, Jun 24, 2009
    #7
  8. On 16 Jun., 23:47, cronoklee <> wrote:
    > > Like this?:

    >
    > > #greybox {
    > >         position:absolute;
    > >         top:12px;
    > >         bottom:12px;
    > >         left:12px;
    > >         right:12px;
    > >         background-color:#CCC;

    >
    > > }

    >
    > Very clever! Really close but is there a way to make it expand when
    > the content of the div is larger than the page height??
    >
    > Thanks a lot!
    > Ciarán


    I dunno if this is correct CSS - but it seems to work in Chrome.
    Make another div that expands without bottom:12px
    and after your content enclose a div with bottom:12px and relative.


    #greybox {
    position:absolute;
    top:12px;
    bottom:12px;
    left:12px;
    right:12px;
    background-color:#CCC;
    }

    #greybox_above {
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    background-color:#ccc;
    }

    #bottom_white {
    position:relative;
    color:white;
    height:12px;
    bottom:0px;
    background-color:white;
    }

    </style>
    </head>
    <body>
    <div id="greybox"> </div>
    <div id="greybox_above">
    <p>
    test<br>
    test<br>
    test<br>
    ....
    ....
    test<br>
    test<br>
    test<br>
    test<br>
    </p>
    <div id="bottom_white"></div>

    </div>
    </body>
    </html>
     
    Jan C. Faerber, Jun 25, 2009
    #8
  9. On 25 Jun., 07:31, "Jan C. Faerber" <> wrote:

    > I dunno if this is correct CSS - but it seems to work in Chrome.
    > Make another div that expands without bottom:12px
    > and after your content enclose a div with bottom:12px and relative.


    Hahaha! No - sorry - that is crap. When the content is too small you
    get the white div in the middle of the page.
    Sorry. Maybe like the script in the thread resize div like table width
    with JS. Or with another css boxing combination - but I want to go and
    buy bread for breakfast now.
    Later.
     
    Jan C. Faerber, Jun 25, 2009
    #9
  10. Ciaran

    dorayme Guest

    In article
    <>,
    "Jan C. Faerber" <> wrote:

    > I dunno if this is correct CSS - but it seems to work in Chrome.
    > Make another div that expands without bottom:12px
    > and after your content enclose a div with bottom:12px and relative.
    >
    >
    > #greybox {
    > position:absolute;
    > top:12p


    Why does it only "seem" to work in Chrome? How come you don't know, you
    have chrome. Why would you not test it in other browsers?

    Your markup does not "work" in any browsers to satisfy the original
    criteria, if you post a url and test it with varying amounts of content
    and browser window sizes, all will be revealed.

    --
    dorayme
     
    dorayme, Jun 25, 2009
    #10
  11. On 25 Jun., 08:18, dorayme <> wrote:

    > Why does it only "seem" to work in Chrome? How come you don't know, you
    > have chrome. Why would you not test it in other browsers?
    >
    > Your markup does not "work" in any browsers to satisfy the original
    > criteria, if you post a url and test it with varying amounts of content
    > and browser window sizes, all will be revealed.



    This would work now in Chrome - but not in IE8

    #greybox {
    position:absolute;
    padding-top:12px;
    top:12px;
    left:12px;
    right:12px;
    height-min:100%;
    }

    #inside {
    position:relative;
    background-color:#CCC;
    bottom:12px;
    }

    #greybox_back {
    position:absolute;
    top:12px;
    bottom:12px;
    left:12px;
    right:12px;
    background-color:#CCC;
    }
    </style>
    </head>
    <body>

    <div id="greybox_back">.</div>
    <div id="greybox">
    <div id="inside">
    test<br>
    test<br>
    test<br>
    test<br>
    ....



    In IE8 it would work like this:

    <style>


    #greybox {
    position:absolute;
    padding-top:12px;
    top:12px;
    left:12px;
    right:12px;
    width:100%;
    height-min:100%;
    }

    #inside {
    position:relative;
    background-color:#CCC;
    bottom:12px;
    width:100%;
    height:100%;
    }

    #greybox_back {
    position:absolute;
    top:12px;
    bottom:12px;
    left:12px;
    right:12px;
    width:100%;
    height:100%;
    background-color:#CCC;
    }
    </style>
    </head>
    <body>

    <div id="greybox_back">.</div>
    <div id="greybox">
    <div id="inside">
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>
    test<br>


    .....

    ....
    But then I don't get any space on the right side - those 12px are
    missing on the right
    with Opera, Chrome and Mozilla.
    Maybe you can use a CSS switch for different browsers.
     
    Jan C. Faerber, Jun 25, 2009
    #11
  12. Ciaran

    dorayme Guest

    In article
    <>,
    "Jan C. Faerber" <> wrote:

    > On 25 Jun., 08:18, dorayme <> wrote:
    >
    > > Why does it only "seem" to work in Chrome? How come you don't know, you
    > > have chrome. Why would you not test it in other browsers?
    > >
    > > Your markup does not "work" in any browsers to satisfy the original
    > > criteria, if you post a url and test it with varying amounts of content
    > > and browser window sizes, all will be revealed.

    >
    >
    > This would work now in Chrome - but not in IE8
    >
    > #greybox {
    > ...
    >
    >
    > In IE8 it would work like this:
    >
    > <style>
    >
    > #greybox {
    >
    > ....
    >
    > ...
    > But then I don't get any space on the right side - those 12px are
    > missing on the right with Opera, Chrome and Mozilla.
    > Maybe you can use a CSS switch for different browsers.


    You know, this reminds me of something, don't ask me to explain the
    relevance, please:

    <http://dorayme.netweaver.com.au/jokes/theSuite.html>

    --
    dorayme
     
    dorayme, Jun 25, 2009
    #12
  13. Ciaran

    Neredbojias Guest

    On 16 Jun 2009, cronoklee <> wrote:

    >
    >> Like this?:
    >>
    >> #greybox {
    >>         position:absolute;
    >>         top:12px;
    >>         bottom:12px;
    >>         left:12px;
    >>         right:12px;
    >>         background-color:#CCC;
    >>
    >> }

    >
    >
    >
    > Very clever! Really close but is there a way to make it expand when
    > the content of the div is larger than the page height??


    Hmm, I must've missed your original post when you posted it. Anyway, I
    worked on a similar thingy a few months ago and came up with the
    following which works fairly well. Key pieces of css/html follow:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    html,body { height:100%;width:100%; }
    body { margin:0;padding:0; }

    <div style="position:absolute; min-width:100%; min-height:100%;
    background:#205020;">
    <div style="padding:8px;">
    <div style="position:absolute; top:0; left:0; width:8px; height:100%;
    background:red;"></div>
    <div style="position:absolute; top:0; right:0; width:8px; height:100%;
    background:red;"></div>
    <div style="position:absolute; top:0; left:0; width:100%; height:8px;
    background:red;"></div>
    <div style="position:absolute; bottom:0; left:0; width:100%; height:8px;
    background:red;"></div>
    <img src="_u/spino1_4.png" alt="">
    </div>
    </div>


    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
     
    Neredbojias, Jun 25, 2009
    #13
  14. Ciaran

    cronoklee Guest

    On Jun 25, 11:52 am, Neredbojias <> wrote:
    > On 16 Jun 2009, cronoklee <> wrote:
    >
    >
    >
    >
    >
    > >> Like this?:

    >
    > >> #greybox {
    > >>         position:absolute;
    > >>         top:12px;
    > >>         bottom:12px;
    > >>         left:12px;
    > >>         right:12px;
    > >>         background-color:#CCC;

    >
    > >> }

    >
    > > Very clever! Really close but is there a way to make it expand when
    > > the content of the div is larger than the page height??

    >
    > Hmm, I must've missed your original post when you posted it.  Anyway, I
    > worked on a similar thingy a few months ago and came up with the
    > following which works fairly well.  Key pieces of css/html follow:
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    >
    > html,body { height:100%;width:100%; }
    > body { margin:0;padding:0; }
    >
    > <div style="position:absolute; min-width:100%; min-height:100%;
    > background:#205020;">
    > <div style="padding:8px;">
    > <div style="position:absolute; top:0; left:0; width:8px; height:100%;
    > background:red;"></div>
    > <div style="position:absolute; top:0; right:0; width:8px; height:100%;
    > background:red;"></div>
    > <div style="position:absolute; top:0; left:0; width:100%; height:8px;
    > background:red;"></div>
    > <div style="position:absolute; bottom:0; left:0; width:100%; height:8px;
    > background:red;"></div>
    > <img src="_u/spino1_4.png" alt="">
    > </div>
    > </div>
    >
    > --
    > Neredbojiashttp://www.neredbojias.org/http://www.neredbojias.net/





    Hi All, Thanks for the surprising amount of replies on this -
    Definitely some interesting approaches and comments. The final
    approach posted by Neredbojias looks like it works quite well (replace
    the img with content). I'll do some more testing on it and report
    back. It may ultimately be simpler to use javascript to resize the
    greybox div.
    Anyway, thanks again for your interest.
    Ciarán
     
    cronoklee, Jun 26, 2009
    #14
  15. Ciaran

    dorayme Guest

    In article
    <>,
    cronoklee <> wrote:


    > The final
    > approach posted by Neredbojias looks like it works quite well ...
    > It may ultimately be simpler to use javascript to resize the
    > greybox div.



    Well done Boji. Nice one for the exercise! I had meant to return to this
    one day. Now I will not.

    Considering it is just for a bit of aesthetics, up to you whether to use
    it. If you go js and js is off, it should not matter greatly.
    Personally, I like the idea that the html should be semantically as good
    as possible and have nothing more than is needed. But I better shut up,
    I can hear the rounded corner brigade charging and it is not nice being
    in the trenches when their horses and lances get real close.... <g>

    --
    dorayme
     
    dorayme, Jun 27, 2009
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lois
    Replies:
    1
    Views:
    3,403
    Ryan Stewart
    Dec 27, 2004
  2. Replies:
    8
    Views:
    6,733
    Neredbojias
    Dec 9, 2005
  3. cera
    Replies:
    1
    Views:
    1,342
    Neredbojias
    Aug 18, 2007
  4. fred
    Replies:
    3
    Views:
    303
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    914
Loading...

Share This Page