100% Height with Margin, No Overflow
Moderator: General Moderators
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
100% Height with Margin, No Overflow
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)
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)
- akuji36
- Forum Contributor
- Posts: 190
- Joined: Tue Oct 14, 2008 9:53 am
- Location: Hartford, Connecticut
Re: 100% Height with Margin, No Overflow
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
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
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.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: 100% Height with Margin, No Overflow
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.
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>- iankent
- Forum Contributor
- Posts: 333
- Joined: Mon Nov 16, 2009 4:23 pm
- Location: Wales, United Kingdom
Re: 100% Height with Margin, No Overflow
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
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
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
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
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
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.
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.
Re: 100% Height with Margin, No Overflow
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.
The with your inner div which you want some padding, you could say something like:
Unless i am completely wrong about what your asking. 
Edit:
Here's an example
edit: fixed the .content to have a width 
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:0pxCode: Select all
margin: 10px 10px 10px 10px;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>- iankent
- Forum Contributor
- Posts: 333
- Joined: Mon Nov 16, 2009 4:23 pm
- Location: Wales, United Kingdom
Re:
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.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.
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
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: 100% Height with Margin, No Overflow
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.
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.
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
Re: 100% Height with Margin, No Overflow
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.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: 100% Height with Margin, No Overflow
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.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: 100% Height with Margin, No Overflow
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
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;
}
- Jonah Bron
- DevNet Master
- Posts: 2764
- Joined: Thu Mar 15, 2007 6:28 pm
- Location: Redding, California
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:
I skipped the wrapper: the body tag works just fine.
Thanks a lot for your help everybody.
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;
}Thanks a lot for your help everybody.