CODEWITHSUNDEEP
htmlcss
Callum Whyte
Callum Whyte

Reputation: 2429

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/

Upvotes: 6

Views: 26839

Answers (7)

Sibiraj
Sibiraj

Reputation: 4756

A very late reply, none of the above helped me. I have a working solution, may help someone. using a flex along with view port for min-height helps to cover the sidebar to the whole page.

this code assumes having a top-bar of height 51px;

.user-content {
  display: flex;
 }

.user-content .side-bar-content {
    flex      : 1;
    flex      : 0 0 220px;
    background: #f1f1f1;
    min-height: calc(100vh - 51px);
    //min-height: 100vh; // without topbar
  }

 .user-content .app-user {
    flex   : 2;
    padding: 0 0 15px 15px;
  }

Upvotes: 1

Vahid Montazer
Vahid Montazer

Reputation: 1301

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 ♥

Upvotes: 0

alchuang
alchuang

Reputation: 3571

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.

Upvotes: 7

André Swanepoel
André Swanepoel

Reputation: 31

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..

Upvotes: 3

Marco Moraes
Marco Moraes

Reputation: 21

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.

Upvotes: 2

ptriek
ptriek

Reputation: 9276

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/

Upvotes: 1

Justus Romijn
Justus Romijn

Reputation: 16019

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;
}

Upvotes: -1

Related Questions