Get div to extend all the way to bottom, regardless of resolution

Question

What I want is a side column, which extends ll the way down to the bottom of the page, i have set the height:100%, but that does not work...could someone give me some suggestions please.

#leftBar is the left hand side column I want to extend down to the bottom of the page.

html:

   <%@ Page Title="" Language="C#" MasterPageFile="~/Template2.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Template2.index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div id="leftBar">
<div id="contentOne">


<p style="font-size:18px; color:Gray; margin-left:50px;">Lorem Ipsum</p>
<hr style="border:1px solid Gray; width:150px;" />
<p style="text-align:center; color:White; z-index:999;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>


</div>

</asp:Content>

css:

body 
{ 
    margin:0px;
    padding:0px;
    background-image:url('/img/pattern.jpg');
    height:100%;


}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

#header {

   background-image:url('/img/header_img.png');
   padding:10px;
   height:100px;
}

#title
{
    color:White;
    font-size:18px;

   overflow: auto;
  display: block;
  width: 550px;
  margin: 0 auto;  
  position:relative;

}


.navigation {
  background: url(images/navigation.png);
  height: 134px;
  overflow: auto;
  display: block;
  width: 550px;
  margin: 0 auto;  
}
.navigation * {
  padding:0;
  margin:0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
}
.navigation ul {
  display: block;
  float: left;
  padding: 0px 0 0 0;
  margin: 37px 0 0 20px;
}
.navigation ul li 
{

  background-color:White;
  list-style: none;
  float: left;
  margin: 0 0 0 5px;
  border-radius: 10px;
}

.navigation ul li a {
  background-image:url(img/navbutton_back.png);
  display: block;
  padding: 0 13px 0 0;
  color: #578ba0;
  text-decoration: none
}
.navigation ul li.selected a,
.navigation ul li.hover a {
  background-image:url(img/navbutton_back.png);
  color: #578ba0;
}

.navigation ul li a span {
  background-image:url(img/navbutton_back.png);
  display: block;
  padding: 15px 10px 10px 23px;
}
.navigation ul li.selected a span,
.navigation ul li.hover a span {
  background-image:url(img/navbutton_back.png);
}

#contentOne
{
    margin-top:20px;
    margin-left:80px;    
    height:200px;
    width:200px;   
    border-top-left-radius:10px;
    border-top-right-radius:10px;


}

#leftBar
{
    position:relative;
    height:100%;
    width:200px;
    background-color:White;
    margin:0px;
    padding:0px;
    margin-top:-20px;
    background-image:url('/img/header_img.png');

}

No that did not work sorry, I added that to the leftColumn class in css — user2413519, May 23 '13 at 13:46
can you provide the rendered html rather than the asp or better still, set up a [jsfiddle](http://jsfiddle.net) — Pete, May 23 '13 at 13:50
This type of question has been answered many times before on SO. — Marc Audet, May 23 '13 at 13:53
http://jsfiddle.net/3zTVp/ There is the fiddle, that is what it is doing, it is not going all the way to the bottom of the page — user2413519, May 23 '13 at 13:55
Change your `body {}` rule to `html, body {}` like I said in my answer http://jsfiddle.net/3zTVp/1/ or just add `html {height: 100%;}` at the top of your CSS — naththedeveloper, May 23 '13 at 13:59
I answered a similar question [here](http://stackoverflow.com/questions/16610506/pure-css-for-2-columns-with-the-same-height-but-stretching-to-a-min-height-of-10/16612379#16612379) that also had fixed height header and footer — Pete, May 23 '13 at 14:03

score 1 · Accepted Answer · answered May 23 '13 at 13:51

1

Set the <html> and <body> to 100% also and add display: block to your sidebar.

html, body {
    height: 100%;
}

See a simple example of it here: http://jsfiddle.net/Nhdvx/

answered May 23 '13 at 13:51

naththedeveloper

4,503
6
36
44

No that does not work sorry, it is only going a certain way down the page, like it is setting the height 100% relative to another div? – user2413519 May 23 '13 at 13:53
@user2413519 That's because of your mark-up in the HTML and not because of the CSS being incorrect... if you want it to extend the page no matter where you put the `
` you need to make it `position: absolute`
– naththedeveloper May 23 '13 at 13:55
Ah right ok that has done it, but now the footer is above the end of that column now, the footer has position set to absolute....could that be the reason. I tried removing the position absolute on the footer, but then it just goes to the top of the page – user2413519 May 23 '13 at 13:58
@user2413519 you can use CSS `z-index` to set the footer above the side bar – naththedeveloper May 23 '13 at 14:01
No what it is doing is the column is going beyond the footer, I want it to stop at the footer. Can this be done? – user2413519 May 23 '13 at 14:09
No - 100% is exactly that... you can't make it 100% minus a little bit for the footer... use `z-index` to position the footer above the sidebar, and this will give you the desired effect anyway. – naththedeveloper May 23 '13 at 14:12
Right ok, i have set the x-index to 999 on the footer, but its still happeninng?> – user2413519 May 23 '13 at 14:14
@user2413519 Look here http://jsfiddle.net/3zTVp/2/ – naththedeveloper May 23 '13 at 14:16

Get div to extend all the way to bottom, regardless of resolution

1 Answers1