Page 1 of 2

100% Height with Margin, No Overflow

Posted: Sun Nov 15, 2009 11:57 am
by Jonah Bron
I've been pretty busy lately, so I'm a little rusty on my CSS.

I'm trying to make a box that reaches the full height of the browser window, that has a border, and a margin. But, whenever I put on the border and the margin, a scroll bar pops up. I know you have to add/subtract the padding/margin from the height, but the height is a percentage. How does one fix this?

Thanks!

(P.S., yes, I searched the web until my eyes came out)

Re: 100% Height with Margin, No Overflow

Posted: Mon Nov 16, 2009 1:30 pm
by akuji36
Hello

Try this

http://www.tutwow.com/tips/quick-tip-css-100-height/

it's a work around to make the box stretch.

thanks

Rod

Re: 100% Height with Margin, No Overflow

Posted: Mon Nov 16, 2009 2:18 pm
by pickle
I don't think you can do exactly what you want with just one div. I'd use two. One that is set to the full height, but with padding. A second, internal div can be placed inside that and also set to 100% height, but will respect the padding of the outer div.

Posted: Tue Nov 17, 2009 3:31 pm
by Jonah Bron
Okay, I was trying to achieve that effect using body, but I'll try that.

Thanks!

Re: 100% Height with Margin, No Overflow

Posted: Tue Nov 17, 2009 3:42 pm
by Jonah Bron
The same thing happens. As soon as I apply a 6px padding, a scrollbar shows up for an extra 12px. Ditto for the 1px border, but with a 2px extra.

Here is the code. I know this is very straightforward, but it just isn't working so far.

Code: Select all

html, body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
 
#outer-div {
    height: 100%;
    width: 100%;
    /*padding: 6px;*/
}
 
#left-section {
    margin-right: 176px;
    height: 100%;
    border: solid 1px #000000;
}
 
#right-section {
    float: right;
    width: 170px;
    height: 100%;
    border: solid 1px #000000;
}

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Document</title>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="outer-div">
            <div id="right-section">
                hello
            </div>
            <div id="left-section">
                hello
            </div>
        </div>
    </body>
</html>

Re: 100% Height with Margin, No Overflow

Posted: Tue Nov 17, 2009 4:19 pm
by iankent
Might not be the answer you're looking for, but personally I'd go with accepting the scroll bars in CSS and use javascript to correct the problem. I.e., anyone with javascript disabled will see the 'broken' CSS version with scrollbars, while anyone with javascript enabled would see the fixed version. I'd guess most people have javascript enabled so it shouldn't be an issue.

You'd need to find the height of the browsers client area, then subtract any padding and margins you've got, and set the height of your DIV to the result.

Alternatively, use something like the Dojo library which can handle all that for you :)

Posted: Tue Nov 17, 2009 5:23 pm
by Jonah Bron
With all due respect, it doesn't make sense that this must be hacked. It is a very simple layout goal, and it should be easily achieved CSS.

I made some changes, and now there is only a vertical scrollbar

Code: Select all

html, body{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    padding-bottom: 6px;
}
 
#left-section {
    margin: 6px 182px 6px 6px;
    height: 100%;
    border: solid 1px #000000;
}
 
#right-section {
    float: right;
    margin-right: 6px;
    width: 170px;
    height: 100%;
    border: solid 1px #000000;
}

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Cyber Manager</title>
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="right-section">
            hello
        </div>
        <div id="left-section">
            hello
        </div>
    </body>
</html>

Re: 100% Height with Margin, No Overflow

Posted: Thu Nov 19, 2009 5:48 pm
by pickle
It seems simple, but I don't think it is. HTML/CSS doesn't work very well when you're trying to fit the page into the viewport.

I've been fiddling for a 1/2 hour & I can't get it to work.

Re: 100% Height with Margin, No Overflow

Posted: Thu Nov 19, 2009 6:23 pm
by Weiry
With your outer div tag, you may need to specify the margins to the div tag that you want to span the 100% with.
Because i think by default there is padding at the top of a HTML that comes by default.
So in your case, if you were to use the example of a div tag encasing the rest of the div tags. You would apply the following margins to the outermost div.

Code: Select all

margin-top:0px;margin-bottom:0px
The with your inner div which you want some padding, you could say something like:

Code: Select all

margin: 10px 10px 10px 10px;
Unless i am completely wrong about what your asking. :D


Edit:
Here's an example

Code: Select all

 
<html>
<style>
.content{position:absolute;margin-top:0px;margin-bottom:0px;width:500px;height:100%;background-color:#1f1f1f;}
.menu{position:absolute;margin-top:15px;width:100%;height:30px;background-color:#CCCCCC;}
.box{position:absolute;margin-top:45px;width:100%;height:300px;background-color:#2f2f2f;}
</style>
<body>
<div class="content">
    <div class="menu">
    Home, Blog, Developments, Links, Portfolio, Contact
    </div>
    <div class="box">
    </div>
</div>
</body>
</html>
edit: fixed the .content to have a width :D

Re:

Posted: Thu Nov 26, 2009 7:05 am
by iankent
Jonah Bron wrote:With all due respect, it doesn't make sense that this must be hacked. It is a very simple layout goal, and it should be easily achieved CSS.
I think you're making the assumption that all web browsers follow the rules set out for them accurately, and that the rules take account of every possible requirement. They don't.

So despite it seeming like a very simple layout goal, in HTML/CSS world it really isn't. Microsoft have all but ruined everything upto HTML4 / XHTML 1.0 and destroyed CSS1 and 2 entirely. Even Mozilla and Opera have done their fair share of standards destruction, which has left us in an unfortunate state where we must use hacks and workarounds to get even the most straightforward of things to work cross-browser (or at all in some cases!)

Things are definately improving with CSS3 and HTML5, but hacks are going to be with us for a long time yet :P

Re: 100% Height with Margin, No Overflow

Posted: Fri Nov 27, 2009 5:56 am
by daedalus__
i didnt read this whole thread but

take that padding off of the html and body elements then try using margins on the body to reduce the height of the element so you can pad it.

im rusty myself so try it. i'll try to make time tomorrow to experiment with the code you posted.

oh and if you are just looking for 100% height columned layouts, i know for a fact that there are very good, complete, examples floating around. but im not a search engine. if you haven't found them by tomorrow night ill dig them up.

Re: 100% Height with Margin, No Overflow

Posted: Fri Dec 04, 2009 8:31 pm
by Jonah Bron
Okay, sorry for my temporary absence. I'm looking into using the CSS display:table property. Reading http://csscreator.com/node/20471 right now. I'll keep you posted.

Re: 100% Height with Margin, No Overflow

Posted: Mon Dec 07, 2009 3:07 pm
by daedalus__
i re-read the original post. does the padding have to be six pixels? you could just use decimal percentages. im gonna tinker with it right now. let you know in an hour.

Re: 100% Height with Margin, No Overflow

Posted: Mon Dec 07, 2009 4:20 pm
by daedalus__
something ive learned about css is that sometimes you really just have to plan your designs around its limitations.

this works in firefox 3.5.5 and opera 10.10

Code: Select all

 
body
{
    margin: 0;
    
    background-color: #c0c0c0;
}
 
div#wrapper
{
    position:absolute;
 
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: 6px;
 
    background-color: #d0d0ff;
}
 
#left-section 
{
    height: 100%;
 
    margin-right: 176px;
 
    background-color: #ffd0d0;
}
 
#right-section 
{
    height: 100%;
 
    float: right;
    width: 170px;
 
    background-color: #ffffd0;
}
 

Posted: Mon Dec 07, 2009 6:23 pm
by Jonah Bron
No, it actually doesn't have to be in pixels. It's working pretty well now, as long as I don't squeeze the window down too much. Here's the final CSS:

Code: Select all

html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body{
    height: 98%;
    width: 99.1%;
    padding: 0.4%;
    margin: 0;
}
 
#left-section {
    margin: 0;
    height: 100%;
    border: solid 1px #000000;
}
 
#right-section {
    float: right;
    margin: 0;
    width: 170px;
    height: 100%;
    border: solid 1px #000000;
}
I skipped the wrapper: the body tag works just fine.

Thanks a lot for your help everybody.