100% Height with Margin, No Overflow

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

100% Height with Margin, No Overflow

Post 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)
User avatar
akuji36
Forum Contributor
Posts: 190
Joined: Tue Oct 14, 2008 9:53 am
Location: Hartford, Connecticut

Re: 100% Height with Margin, No Overflow

Post 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
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: 100% Height with Margin, No Overflow

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post by Jonah Bron »

Okay, I was trying to achieve that effect using body, but I'll try that.

Thanks!
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: 100% Height with Margin, No Overflow

Post 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>
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re: 100% Height with Margin, No Overflow

Post 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 :)
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post 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>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: 100% Height with Margin, No Overflow

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Weiry
Forum Contributor
Posts: 323
Joined: Wed Sep 09, 2009 5:55 am
Location: Australia

Re: 100% Height with Margin, No Overflow

Post 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
User avatar
iankent
Forum Contributor
Posts: 333
Joined: Mon Nov 16, 2009 4:23 pm
Location: Wales, United Kingdom

Re:

Post 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
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: 100% Height with Margin, No Overflow

Post 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.
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: 100% Height with Margin, No Overflow

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: 100% Height with Margin, No Overflow

Post 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.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: 100% Height with Margin, No Overflow

Post 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;
}
 
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Post 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.
Post Reply