Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > 100% min-height div with margin and no scrollbars?

Reply
Thread Tools

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

 
 
Ciaran
Guest
Posts: n/a
 
      06-16-2009
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
 
Reply With Quote
 
 
 
 
Jan C. Faerber
Guest
Posts: n/a
 
      06-16-2009
On 16 Jun., 03:20, Ciaran <(E-Mail Removed)> 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


 
Reply With Quote
 
 
 
 
cronoklee
Guest
Posts: n/a
 
      06-16-2009

> 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
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      06-23-2009
On 15 juin, 21:20, Ciaran <(E-Mail Removed)> 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/
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-23-2009
In article
<(E-Mail Removed)>,
GTalbot <(E-Mail Removed)> wrote:

> On 15 juin, 21:20, Ciaran <(E-Mail Removed)> 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
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      06-24-2009
On 23 juin, 19:06, dorayme <(E-Mail Removed)> wrote:
> In article
> <(E-Mail Removed)>,
>
>
> ...
> > > * {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/
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-24-2009
In article
<(E-Mail Removed)>,
GTalbot <(E-Mail Removed)> wrote:

> On 23 juin, 19:06, dorayme <(E-Mail Removed)> wrote:
> > In article
> > <(E-Mail Removed)>,
> >
> >
> > ...
> > > > * {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
 
Reply With Quote
 
Jan C. Faerber
Guest
Posts: n/a
 
      06-25-2009
On 16 Jun., 23:47, cronoklee <(E-Mail Removed)> 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>
 
Reply With Quote
 
Jan C. Faerber
Guest
Posts: n/a
 
      06-25-2009
On 25 Jun., 07:31, "Jan C. Faerber" <(E-Mail Removed)> 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.
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      06-25-2009
In article
<(E-Mail Removed)>,
"Jan C. Faerber" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
How to have margin-left: 10%; margin-right: 10%; only sometimes?? Cal Who ASP .Net 4 05-17-2010 12:17 PM
How to have margin-left: 10%; margin-right: 10%;" only sometimes Cal Who ASP .Net 1 05-16-2010 08:53 PM
Epson 4000 - margin to margin? nobody Digital Photography 6 03-28-2005 05:17 PM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM



Advertisments