Re: [css-d] content over flow
Here we go! http://www.coastalriders.com/cssTest/ On 17-Dec-05, at 7:48 PM, Gunlaug Sørtun wrote: Dustin Krysak wrote: Now my div does in fact expand with my content, however one of the other desired effects is to have the div still take up 100% of the viewport even when the content was small. Got a link to a live test-page we can look at? I don't normally recreate layouts to test other peoples solutions, as it is much better to work/debug directly on someone else's layout and see what's missing/not working there. Minor details may make all the difference. My own test-cases have a tendency to work no matter what, so they are often of little use to others ;-) (not a joke, but the result of understanding the rules applied) Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Dustin Krysak Backbone Technology Inc. 604.713.8560 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] content over flow
Hi there - I had a go with the below code, and it worked to a degree.
Now my div does in fact expand with my content, however one of the
other desired effects is to have the div still take up 100% of the
viewport even when the content was small.
Any other suggestions?
On 16-Dec-05, at 4:57 AM, Zoe M. Gillenwater wrote:
Gunlaug Sørtun wrote:
Dustin Krysak wrote:
... I know this can be controlled with the overflow attribute -
HOWEVER.. .I want my layers to expand with the content.
Something like...
html {height: 100%;}
body {min-height: 100%;}
* html body {height: 100%;}
Just to explain Georg's code here...
The reason why your borders ended at the bottom of the browser
window,
Dustin, is that you told them to. You told your div to be 100% of
the
body element, which should be 100% of the viewport. Since you didn't
use min-height, you were telling your div to be the size of the
viewport
and that's it. When the viewport ended, your div was ending.
Georg's CSS fixes this by using min-height of 100% on the body. This
means that the body element can stretch down past the end of the
viewport, and your div inside can too since it's still set to height:
100%. The third line in Georg's CSS is a hack to feed height: 100%
back
to IE. IE doesn't understand min-height, but it treats height just
like
it, so this works out fine. You may consider keeping this hack in an
IE-only sheet fed through Conditional Comments.
Hope that helps,
Zoe
--
Dustin Krysak
Backbone Technology Inc.
604.713.8560
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] content over flow
Perfect!
Thanks for the help! I will give it a go!
Dustin
On 16-Dec-05, at 4:57 AM, Zoe M. Gillenwater wrote:
Gunlaug Sørtun wrote:
Dustin Krysak wrote:
... I know this can be controlled with the overflow attribute -
HOWEVER.. .I want my layers to expand with the content.
Something like...
html {height: 100%;}
body {min-height: 100%;}
* html body {height: 100%;}
Just to explain Georg's code here...
The reason why your borders ended at the bottom of the browser window,
Dustin, is that you told them to. You told your div to be 100% of the
body element, which should be 100% of the viewport. Since you didn't
use min-height, you were telling your div to be the size of the
viewport
and that's it. When the viewport ended, your div was ending.
Georg's CSS fixes this by using min-height of 100% on the body. This
means that the body element can stretch down past the end of the
viewport, and your div inside can too since it's still set to height:
100%. The third line in Georg's CSS is a hack to feed height: 100%
back
to IE. IE doesn't understand min-height, but it treats height just
like
it, so this works out fine. You may consider keeping this hack in an
IE-only sheet fed through Conditional Comments.
Hope that helps,
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] content over flow
Hi there - more of a tinker type person with css, and had the
following code:
* {
padding: 0px;
margin: 0px;
}
html, body {
height: 100%;
width: 100%;
}
div#bg {
border: medium solid #FF;
height: 100%;
width: 650px;
}
div#bgBody {
height: 100%;
width: 645px;
border: medium solid #FF;
}
Now the HTML is nothing but:
div id=bg
div id=bgBody
script language=javascript
//simple for-loop to write out some text 20 times!
for(i=0; i=20; i++)
{
document.write('pHere is some layer content!/p');
}
/script
/div
I am just testing. At any-rate I am trying to get my layers to be
100% in height. Which they seem to be doing - however when my content
extends that of the browser window, my content overflows past the
borders I have defined for testing. I know this can be controlled
with the overflow attribute - HOWEVER.. .I want my layers to expand
with the content.
What is the best way to accomplish this?
Sorry for the noob question
Dustin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
