lotte Posted July 5, 2008 Share Posted July 5, 2008 Hello from the Netherlands! I hope you can help me out.Forgive me if this is a bit of a stupid question.. I'm kinda new to css. But I'm very motivated to learn and hope to be able to contribute to this forum with answers as well in a while!So, my problem is this:I have a site that consist of a container div, in which at the top sits a menu bar (an inline list), and below that a main content div plus 2 floating divs on the left and right of that.What I want is for the whole thing to be 100% in height (of the viewport) so that there will never be a scrollbar. So I made the container div's height 100%, as well as that of the body and html (otherwise it doesn't work).But a scrollbar keeps showing up, because if I make the column divs 100% in height as well, they reach further than the end of the viewport below, because they sit below the menu bar that has a certain height.Also, the menu bar doesn't show fully, the top padding part is cut off a bit and I don't know why..Is there a way to solve this, or to make the columns reach to the end of the viewport, so make their height 100% minus the height of the menu bar?What I want is this, but here is what I get now: my test site (btw, I use firefox)And here is the code as it is now: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <TITLE>Lotte's test page</TITLE> <STYLE TYPE="text/css"> html, body {margin: 0px; height: 100%;} body {background-color: black; font-family: arial; font-size: 11px; color: gray; } #everything {border-left: 1px solid white; border-right: 1px solid white; width: 760px; margin-left: auto; margin-right: auto; height: 100%;} li {color: #A9A9A9; margin: 0px; padding: 7px; border-right: 1px solid hotpink; display: inline; list-style: none; } ul {margin: 0px; display: inline; } #main {border-top: 1px solid white; border-bottom: 1px solid white; margin-top: 7px; color: black; background-color: pink; } #left {width: 220px; float: left; border: 1px solid white; border-left: 0px; margin-right: 20px; padding-left: 20px; margin-top: 7px; background-color: black; height: 100%;} #right {width: 150px; float: right; border: 1px solid white; border-right: 0px; margin-left: 20px; padding-left: 20px; margin-top: 7px; background-color: black; height: 100%;} </STYLE></HEAD><BODY><div id="everything"><ul class="menu"><li>Home</li><li>Werkwijze</li> <li>Rechtsgebieden</li> <li>Mediation</li> <li>Advocaten</li> <li>Werk & Stage</li> <li>Links</li> <li>Contact</li> <li>Disclaimer</li></ul><div id="left"><p>left block</p><p>left block</p><p>left block</p><p>left block</p><p>left block</p></div><div id="right"><p>right block</p><p>right block</p><p>right block</p><p>right block</p><p>right block</p></div><div id="main"><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p><p>main content block</p></div></div></BODY></HTML> (sorry for the lengthy post..)Thank you for reading!!!*Lotte* Link to comment Share on other sites More sharing options...
lotte Posted July 6, 2008 Author Share Posted July 6, 2008 Ok, maybe it really was too lengthly . One of the problems in short:Why does this get a scrollbar (in firefox & IE)? (see here): <HTML><HEAD> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <TITLE>Lotte's test 4</TITLE> <STYLE TYPE="text/css">html, body {height: 100%;margin: 0px;}#main {width: 800px;border: 1px solid hotpink;height: 100%;margin: 0px;} </STYLE><BODY><div id="main">MAIN</div></BODY></HTML> Link to comment Share on other sites More sharing options...
Synook Posted July 6, 2008 Share Posted July 6, 2008 Why does this get a scrollbar (in firefox & IE)? (see here):Because 100% + 2 px (one for each border) > 100%. Link to comment Share on other sites More sharing options...
23.12.2012 Posted July 6, 2008 Share Posted July 6, 2008 I'm not that good at this, but you should try using a px value instead. Also, if it's a webpage, why don't you create an external stylesheet? Link to comment Share on other sites More sharing options...
lotte Posted July 6, 2008 Author Share Posted July 6, 2008 Because 100% + 2 px (one for each border) > 100%.Oops, I see Synook Thanks!I was trying to make the problem simpler, but I made it a bit too simple.Could you maybe also take a look at the 2 links in my first post? All I want is a 3 column layout with a horizontal list as a menu, and the height set to 100% of the viewport. Is that possible?I'm able to do a 100% height 3 column layout now, but when I want to embed a <ul> in the container div, the menu bar, it gets all scrolly.. Link to comment Share on other sites More sharing options...
lotte Posted July 6, 2008 Author Share Posted July 6, 2008 I'm not that good at this, but you should try using a px value instead. Also, if it's a webpage, why don't you create an external stylesheet?Hi 23.12, thanks for replying! I know I can use a px value, but I want (or at least, my 'customer' wants) the page to reach down to the end of the viewport. And since every user's viewport has a different height in px, I have to use %. And the internal stylesheet is only because it's a test page, I thought it would be easier to post it here like that. But it's a bit long now Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted July 6, 2008 Share Posted July 6, 2008 Try making both the content blocks and the menu bar a % height, so the menu bar could be like 7% height and the content could be 92% height (I don't know how that will look, try changing the values )Also, you need lowercase tags in XHTML, so change <HTML> to <html> and so on. Link to comment Share on other sites More sharing options...
lotte Posted July 6, 2008 Author Share Posted July 6, 2008 Try making both the content blocks and the menu bar a % height, so the menu bar could be like 7% height and the content could be 92% height (I don't know how that will look, try changing the values )Also, you need lowercase tags in XHTML, so change <HTML> to <html> and so on.Hi FfR, thanks for dropping by! I don't think I'd be too happy with this solution, as it would make the menu bar height variable, where I want it to be fixed in height (so that the border-right's fit nicely in their box). You know what I mean?I'm starting to think this problem is quite hard to solve, it seems a lot of people have 100% height problems with css.. after a whole day now I did find workaround solutions like using negative margins and repeating background-images, but none of them has helped me so far! And I'd just like to do it the right, clean way.There's got to be a good way to achieve what they did, right? www.meulenkampadvocaten.nl/Hoping for some more help Link to comment Share on other sites More sharing options...
Synook Posted July 7, 2008 Share Posted July 7, 2008 You could try fiddling around with a sticky footer: http://www.themaninblue.com/writing/perspective/2005/08/29/ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.