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

C

Ciaran

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
 
J

Jan C. Faerber

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;

}
Click to expand...


Like this?:

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

cronoklee

Like this?:

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

}
Click to expand...



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
 
G

GTalbot

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....
Click to expand...
(...) a way to make it expand when
the content of the div is larger than the page height??
<html>
Click to expand...

No doctype declaration. Very important to declare one which will
trigger standards compliant rendering mode in all modern browsers.
<head>
<style>
* {margin: 0;}
Click to expand...

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;
Click to expand...

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
Click to expand...

<!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
 
D

dorayme

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

You're removing margin on all elements, even those which can not have
a margin
Click to expand...

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;
Click to expand...
<div id="greybox">
<p>content here</p>
</div> ....
Click to expand...

does not address the concern of the OP.
 
G

GTalbot

...


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

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).
...
...

does not address the concern of the OP.
Click to expand...

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

Gérard
 
D

dorayme

GTalbot said:
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 ... ...
Click to expand...

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.

Well, I thought it would but later realized it didn't. I would need to
spend more time on this...
Click to expand...
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.
 
J

Jan C. Faerber

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
Click to expand...

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>
 
J

Jan C. Faerber

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.
Click to expand...

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.
 
D

dorayme

"Jan C. Faerber said:
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
Click to expand...

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.
 
J

Jan C. Faerber

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.
Click to expand...


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.
 
D

dorayme

"Jan C. Faerber said:
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.
Click to expand...

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

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

Neredbojias

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??
Click to expand...

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>
 
C

cronoklee

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>
Click to expand...




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
 
D

dorayme

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.
Click to expand...


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>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Slideshow not working properly 2
Please Help? 0
I Need Help with making a function that draws in a canvas using location data. 1
Help needed with code 5
Need help , Having problem with Drag n Drop ? 9
Snowing Effect 2
Justify-content not working 1

Members online

No members online now.
Total: 27 (members: 1, guests: 26)
Robots: 207

Forum statistics

Threads
473,763
Messages
2,569,563
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top