Make sidebar full page height

I have a CSS sidebar that will display links on my website. However, it does not fill the full page height as I want. How can I make this work?

JSFiddle: http://jsfiddle.net/Pw4FN/

Answers


You cannot float an absolute positioned element. Don't forget to set the height of both the body and the html nodes to 100%, and use a padding on the body element to avoid overlapping.

body, html {
    height: 100%;
}
body {
    padding-left: 200px;
}

there is a much easier way that I thought of yesterday.

Go have a look at the website I'm busy with: http://www.atlm.co.za/aboutconcepts.html and look at the sidebar to the right in blue.

This is easily accomplished by having that sidebar as the main container nad the larger white content area to the left as a floating object...

Quite simple, just remember to clear the float to have the blue main container extend down to the bottom.

<div class="maincontainer">
<div class="maincontent_blue">

<!-- Title -->



<!-- Title__end -->      




<div class="mainleft">

<h1 style="text-align:center">About Concepts</h1>

<p><img src="images/aboutlogo1.png" width="500" height="284" /></p>
<p><a href="pdf/Media Pack About Concepts 201102_1.pdf" title="About Concepts Media Pack" target="_blank"><img src="images/aboutmp.png" width="500" height="284" /></a></p>
<p><img src="images/aboutp1.png" width="500" height="284" /></p>
<p><img src="images/aboutp2.png" width="500" height="284" /></p> 
<p><img src="images/aboutlogo2.png" width="500" height="284" /></p>
<p><img src="images/aboutlogo3.png" width="500" height="284" /></p>     


<p>&nbsp;</p>

</div>

<p>&nbsp;</p>

<p style="padding-top:40px">We designed a About Concepts' new logo for them in a record time and they were greatly impressed with our service.</p>

<p style="padding-top:185px">After the logo design, they needed us to design presentational tools for their sales people. We then sat down with the Marketing Manager, Sales Manager and a few of the sales people to really understand what the company was all about and how we were to approach the project and also how we could compliment their excellent sales team with tools that would almost do their jobs for them.</p>
<p style="padding-top:600px">After satisfying their needs and after some time they >came back to us and asked us to design a new logo that would shift trends as they were >moving into new offices with a modern design. We jumped to the opportunity to greatly >improve their already fantastic logo. This is what we came up with. We later heard back >from them and all the compliments they were getting on the great new logo. They >&quot;stood from the crowd&quot; as the owner stated.</p>
<div class="clearfloat"></div>

</div>
<!-- end .maincontent_blue -->        
</div><!-- end .maincontainer -->

That is the html I used and the css is as follows:

.maincontent_blue {
  margin-top: 0;
  padding-bottom: 0;
  width: 100%;
  background: #00D7E8;
  color:#fff;
}


.mainleft {
  height: 100%;
  float: left;
  background: #fff;
  padding-top: 5px;
  padding-bottom: 10px;
  width: 600px;
  margin-right: 15px;
  margin-bottom: 0;
}

This was quite simple to do and I suppose anyone will be able to follow my code..


I added ul and moved the padding from the outer div to margin on the ul - now the scrollbar is gone (at least I think that was the problem?)

see http://jsfiddle.net/Pw4FN/1/


position:absolute;
width:100px;
height:100%;
top:0;
left:0;

the element cant be floated, or it will not fill whole page, and cant have padding at top or bottom, the padding will cause scroll. If you need the padding top, set to the child element, like UL.


The easiest way is simply to do:

height: 100vh;

Where 'vh' stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.


I learned this from Wordpress dashboard sidebar.

Simply write these :

html{
    height:100%;
}
body{
    position: relative;
    min-height: 100%;
}
.sidebar{
   background: yellow;
   height:100%;
   position: absolute;
}

I hope this help you ♥


Need Your Help

Correct way to define a constant C-string in C++?

c++ c++11 const auto cstring

Most of the time I see constant C-strings defined as:

Display radio buttons in prolog xpce

prolog swi-prolog xpce

I created a menu with Radio Buttons in XPCE prolog, but my radio buttons are showing on the same line, and I want to have each one on a separate line.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.