• Locked
2 replies [Last post]
Fri, 2012-01-20 13:01
MykMallett
MykMallett's picture
User offline. Last seen 17 weeks 2 days ago. Offline
newbie
Joined: 2012-01-20
Posts: 1
Points: 2

Hi,

Firstly, I know this looks like a question that has been asked plenty of times, but I have searched and I have looked for this for ages and my colleagues are also stumped...

I want a sidebar to be the entire height of the document. But instead, it stops at the height of the screen it is rendered on, so when I scroll down it doesn't go to the bottom of the page. I've tried using position absolute and using floats and clearing the container div and nothing seems to work.

A simple version of my code is here:

<body>
 
 <nav id="sidebar-left-region">
   <header>
   <a href="#"><img id="logo" src="img/logo.png" alt="Simpla Admin logo" /></a>
   </header>
 
 
 
 </nav>
 
 <div id="main-wrapper">
 
 <!-- Region: header -->
 <header id="head">
 
 </header>
 
 <section id="content-region">
 
 </section>
 
 <footer>
 
 </footer>
 </div><!-- End of main content -->
</body

and the CSS (again, simple)

body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif
}
 
nav {
 position: absolute;
 top: 0;
 left: 0;
 width: 230px;
 background: black url('images/435.gif') repeat;
 height: 100%;
 -moz-box-shadow: inset -6px -0px 8px black;
 -webkit-box-shadow: inset -6px -0px 8px black;
 box-shadow: inset -6px -0px 8px black;
}
 
nav header {
 padding: 40px 0px 0px 20px;
}
 
#main-wrapper {
background-color: #ccc;
 margin-left: 230px;
	height: 1000px;
}

Can anyone help, this is driving me insane. This page I found has got it to work, but I don't know how, I think it might be through javascript, as when I copy the html and css and try it, it doesn't work. And when I firebug the sidebar, it actually stops further up the page - but the body background is not that image?
http://demo.ponjoh.com/Simpla-Admin/index.html?

Any help would be hugely appreciated

Thanks

Top
Tags:
Mon, 2012-02-06 13:57
#1
balajidesign
balajidesign's picture
User offline. Last seen 7 weeks 2 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

Hi Friend, we change the code

Hi Friend,

we change the code on below:
in your code, mention the same height of both of left and right section container. that will be working fine for me. try the below code:

<style>
html, body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
 
}
 
nav {
 position: absolute;
 top: 0;
 left: 0;
 width: 230px;
 background: black url('images/435.gif') repeat;
height:1000px;
 -moz-box-shadow: inset -6px -0px 8px black;
 -webkit-box-shadow: inset -6px -0px 8px black;
 box-shadow: inset -6px -0px 8px black;
}
 
nav header {
 padding: 40px 0px 0px 20px;
}
 * html #main-wrapper{
height: 100%;
}
#main-wrapper {
background-color: #ccc;
 margin-left: 230px;
height:1000px;
}
</style>
<body>
 
 <nav id="sidebar-left-region">
   <header>
   <a href="#"><img id="logo" src="img/logo.png" alt="Simpla Admin logo" /></a>
   </header>
 
 
 
 </nav>
 
 <div id="main-wrapper">
 
 <!-- Region: header -->
 <header id="head">
 
 </header>
 
 <section id="content-region">
 
 </section>
 
 <footer>
 
 </footer>
 </div><!-- End of main content -->
</body>

Top
Mon, 2012-02-06 13:58
#2
balajidesign
balajidesign's picture
User offline. Last seen 7 weeks 2 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

another format

This is another format for your reference.

<a href="http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/" rel="nofollow">http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/</a>

Top
  • Locked