|
CSS - Making Div(css) Full Page Height
I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page.
I have height: 100%; in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch? I have tried height: auto; but that doesnt work either. Similar TutorialsHey I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory. Code: /* page defaults */
body {
margin: 0px;
padding: 0px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #EAEAEA;
}
/* Layout divs */
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
position: static;
left: 40px;
top: 12px;
padding: 0px;
width: 800px;
border-right: #003366 1px solid;
border-left: #003366 1px solid;
margin-right: auto;
margin-left: auto;
height: auto;
text-align:left;
background-color: #FFFFFF;
}
#title {
background-image: url(images/saved_title.gif);
margin-top: 10px;
background-repeat: no-repeat;
height: 150px;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000000;
}
#navbar {
background-image: url(images/navbar.gif);
background-repeat: no-repeat;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid black;
padding: 5px;
background-color: #CCCFFF;
width: 230px;
height: 100%;
margin: 0;
float: left;
font-size: medium;
}
#content {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
padding-top: 40px;
background-image: url(images/content.gif);
background-repeat: no-repeat;
background-position: -239px 0px;
background-color: #FFFFFF;
height: auto;
width: 539px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom: 10px;
padding: 10px;
border-top: solid 1px black;
border-bottom: solid 1px black;
width: 780px;
height: 25px;
text-align: center;
}
/* Links */
a:link {
color: #006699;
}
a:visited {
color: #006699;
}
a:hover {
color: #006699;
text-decoration: none;
}
a:active {
color: #006699;
}
/* elements */
#navwin h2 {
font-size: large;
display: block;
}
#navwin ul {}
thanks Matt I am looking for some examples on making this layout: ----------HEADER---------- nav content - - - - - - - - - - - - ----------FOOTER0--------- The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers? Hello, In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning? Thanks, Andy Hello Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between. If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11 I would like the end result to work in the above browsers as well as IE7 if possible I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Columns</title>
<style type="text/css">
*, html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
html, body {
width: 100%;
height: 100%;
}
#maincontainer {
position: relative;
height: 100%;
background: #eee;
}
#left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
background: #fbb;
height: 100%;
}
#mid {
position: relative;
margin: 0 200px 0 200px;
background: #efe;
height: 100%;
}
#right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
background: #bbf;
height: 100%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="left">
left start<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left<br />
left end<br />
</div>
<div id="mid">
mid start<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid<br />
mid end<br />
</div>
<div id="right">
right start<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right end<br />
</div>
</div>
</body>
</html>
In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter Thanks in advance Hi all! After trying more then a few things I'm about to give up, so I hope someone here has the answer. The problem is the following: * A website contains 3 DIV columns and an header at the top, this is all inside a single wrapper DIV which centers the webpage. * All three columns should have the same length as the longest column. * When the content in the 3 DIV columns is shorter then the height of your browser window, the DIV elements should fill-out until the bottom of the screen. Point 2 is doable. Point 3 is doable. But the combination of point 2 and 3 seems quite hard. Hope someone has an idea . Thanks! Hi, I am trying to better understand how column heights are displayed, and how to create full height columns. On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns. On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page. Can anyone help me understand what is going on, and why one column has full height color yet not the other one? Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible. My code is listed below (sorry about the ugly colors!) Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: olive;}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content {background-color: red;}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header {background-color: purple;}
.clear
{
clear:both;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
This seems like it should be very easy to do but something is preventing it from working. I was following the guide at http://www.alistapart.com/articles/negativemargins but with my navigation column on the left. A summary of my layout right now is: <div id="wrapper"> <div id="container"> <div id="content"> </div> </div> <div id="navigation" <div id="navlist"> </div> </div> <div id="clearing"> </div> </div> my css: #container { float: right; margin-left: -16.8em; width: 100%; background-color: #2586d7; } #navigation { float: left; width: 14em; background: #90bade url(navimage.jpg) repeat-y: right; } #wrapper { background: #90bade url(navimage.jpg) repeat-y: right; } #navlist is a div containing a styled ul for navigation. #clearing { clear: both; height: 0; } So basically the navigation div is supposed to extend to the bottom as far as the container div goes. According to the guide at AListApart it should be working but is something else in my code interfereing? If everything above should work fine, I can post a link to the test file so you can see the rest of the code. Thanks for any help! Ok I've got this... Code:
<html>
<head>
<style type="text/css">
body {
height: 100%;
background-color: blue;
margin: 0px;
padding: 0px;
}
.container {
height: 100%;
width: 300px;
margin: 90px auto 50px auto;
background-color: green;
}
.footer {
position: absolute;
bottom: 0%;
width: 100%;
background-color: yellow;
height: 50px;
}
.menubar {
position: absolute;
top: 0px;
width: 100%;
background-color: red;
height: 95px;
}
</style>
</head>
<body>
<div class="menubar">
MENUBAR
</div>
<div class="container">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>z<br>
<!-- footer -->
<div class="footer">
FOOTER
</div>
</div>
</body>
</html>
Which works beautifully in opera, the green part is the full size of the document with all those a<br> in there (or without), and the footer is perfectly placed at the bottom. But both IE (testing on version 6) & NS (testing on version 7.1) display the footer at the bottom of the window when it loads, not after the container div is finished... Also in NS the container divs background colour finishes once you scroll down a little. Now I've tried many different ways around this. I know what its like when I spend too long looking at one thing, I end up missing the obvious - so I thought I'd throw it out to a wider group for observations... I thank you in advance. -D Hi, I have a border around the content of my page which is limited in width but not height. Some of the pages have more content then others so the height adjusts. I also have a left column and a black background with and image in this column but I have 2 problems 1. In IE I can't seem to get this black column(div) to extend to the full height of the column so that it reaches the border. 2. In Firefox this left column extends all the way down the page and the border doesn't surround the text it sort of collapses The column is left floated and in a div and the content is right floated and in a div as well which is all surrounded by a div with a border. I would appreciate any help that you might offer. Thanks I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks Hey guys, I'm having some trouble getting a table to stretch to 100% of the browser height. It seems to work in IE but not in netscape. Any suggestions? Here is what I'm doing in headder tag: Code: <style type="text/css">
html,body { height:100%; }
.outer{ height:100%; }
</style>
Then in my code for the table I have this: Code: <table width="808" border="0" cellspacing="0" cellpadding="0" class="outer"> Should I try using a DIV tag instead? Please let me know if you have any suggestions. Thanks! Hi. I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it. I am trying to make my content div be 100% height of the window size, so I have the following css: Code:
html, body
{
background: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Trebuchet MS, Helvetica, sans-serif;
}
#wrapper
{
background: #FFFFFF;
position: relative;
width: 100%;
height: 100%;
margin: 0px auto;
}
#header
{
background-image: url("images/h-bg.png");
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px;
width: 960px;
height: 107px;
}
#header .logo
{
margin-left: 10px;
}
#header .bg_l
{
float: left;
}
#header .bg_r
{
float: right;
}
#nav
{
background-image: url("images/n-bg.png");
position: relative;
margin: 0px;
width: 100%;
height: 143px;
text-align: center;
}
#nav a
{
float: left;
outline-style: none;
width: 240px;
height: 156px;
}
#nav_btn_wrapper
{
width: 960px;
margin: 0px auto;
}
#content
{
position: relative;
background-image: url("images/c-bg.png");
background-repeat: repeat-y;
width: 930px;
height: 100%;
margin: 10px auto 0px auto;
padding: 10px 15px 0px 15px;
font-size: 12pt;
}
As you can see I have height: 100% in every parent element from container up. Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly. I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless. See www.landmarkmeds.com to see the problem in action. I have tried to remove the margin on the content div, but that only moved it up a bit. Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know! I'm sure it's something stupid I've missed, but please help! as you can see on: Click Me when you hover over the links on the menu the height of the box changes since it is set to auto, is there a fix so it doesn't move? Hello everybody! I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS: HTML (I only included the very basic structure): <html> <body> <div class="container"> <div id="content"> <div id="..."></div> <div id="..."></div> <div id="..."></div> <div id="..."></div> </div> </div> </body> </html>` CSS: html, body { height: 100%; font-family: Arial; font-size: 10px; color: #000000; background: #FFF url(../../images/body.png) no-repeat center 40px; margin: 0; position: relative;} .container { height: 100%; width: 960px; margin-right: auto; margin-left: auto; position: relative;} #content { width: 939px; min-height: 100%; position: relative; top: 210px; left: 6px; box-shadow: 0px 0px 8px #666; -moz-box-shadow: 0px 0px 8px #666; -webkit-box-shadow: 0px 0px 8px #666; background-color: #FFF;} I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. It does, however, create the desired effect of the shadow and background of the #content div all the way to the end of the page. Am I missing anything? I thought min-height would work, but it doesn't! It only stretches the content div to page height and everything else is overflow, but without the content div's background color and shadow. Does anybody maybe see where the problem lies? Thank you so much in advance for your help. I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!) I want to recreate the shadow on the sides of the main container of this blog the url is blocked just google robin cornett and then find the style sheets How do I do that? The blog has two style sheets My style sheet is at annieagarwal.com/blog/wp-content/themes/tofurious/style.css I created a png of the shadow that is 1000px wide at annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help? thx dh Hi, How common it is these days to make a web pages using only css and not using tables? And what are the pros and cons of that? Thanks Hi, I have attached 2 files code. I want the page to look like the second one.with both navigation boxes on the left on top of each other. But the 1st one I am trying to look the same with out putting the <divs> with in a <div> and it does not work, what am i doing technically wrong here? wrong one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:75%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 30px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#nav { width: 30%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 30%; padding: 0px; margin-top: 210px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
Right one Code:
<html>
<head>
<STYLE type=text/css>
body
{ background-color: grey; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#outer { width: 70%; height:70%; background-color:#FFFFFF; margin-top: 150px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px;
}
div#header { padding: 0px; margin-top: 0px; text-align: center; background-color:#659EC7; height:130;
}
div#exp { width: 35%; padding: 0px; margin-top: 1px; float: left;
}
div#nav { width: 100%; height: 200; padding: 0px; margin-top: 1px; float: left; background-color:#616D7E;
}
div#navt { margin-left: 0px; width: 100%; padding: 0px; margin-top: 5px; float: left; background-color:#616D7E;
}
div#main { margin-left: 40%; margin-top: 1px; padding: 0px; text-align: center; height:65%;
}
div#footer { padding: 0px; margin: 0px; text-align: center; height:62; vertical-align:text-top;
}
</STYLE>
</head>
<body>
<div id="outer">
<div id="header">
<h3>Bank</h3>
</div>
<div id=exp>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="navt">
<h4>Navigation1</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer">
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
</html>
|
|||||||