CSS Sidebar - Height Needed 100%

Matt Clarke · Jan 2, 2013

Screenshot by Lightshot - This is the image of what I am creating.

I need the sidebar to go down 100% in height of the parent div tag. I have set min-height: 100% on the actual sidebar div but it doesn't seem to be working.

Some help would be greatly appreciated.

This is the HTML of the sidebar on the page.

Code:

        <div class="sidebar">
          <div class="sidebar-panel">
            <div class="sidebar-splitter"></div>
                <div class="sidebar-header">Need Help?</div>
                <div class="sidebar-content">
    				Post a ticket and one of our representatives will be deal with your problem when they are next available.
                    <a href="#ticket" class="post-ticket">Post a Ticket!</a>
		  </div>
          
            <div class="sidebar-splitter-flip"></div>

          </div>
          
            <div class="sidebar-panel">
            <div class="sidebar-splitter"></div>
                <div class="sidebar-header">Recommend Us!</div>
                <div class="sidebar-content">
    				Login to Recommend a friend and earn special offers!
                    <br /><a href="login.php" class="top-bar-login-button">Login</a>
                </div>
            </div>
            
            <div class="sidebar-splitter-flip"></div>
          <div class="sidebar-splitter"></div>
          
      </div>
    <div class="clear"></div>

This is the CSS

Code:

.sidebar {
	background-color: #F4F4F4;
	float: right;
	width: 300px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	text-align: center;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	height: 100%;
	min-height: 100%;
}
.sidebar-panel {
	
}
.sidebar-header {
	color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	text-transform: none;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	padding: 5px;
	margin: 0px;
	
}
.sidebar-content {
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	padding: 5px;
	font-size: 12px;
	
}
.sidebar-splitter {
	background-image: url(../img/sidebar-spitter.jpg);
	background-position: center top;
	height: 17px;
	width: 199px;
	margin-right: auto;
	margin-left: auto;
}
.sidebar-splitter-flip {
	background-image: url(../img/sidebar-spitter-flip.jpg);
	background-position: center top;
	height: 17px;
	width: 199px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

Thanks, Matt.

tearhear18 · Jan 3, 2013

where is the sidebar?
you mean the header or what cant figure out

TimeBomb · Jan 3, 2013

Post the HTML and CSS, we'll be able to help you a lot more efficiently.

jMerliN · Jan 3, 2013

I would recommend a flexbox.

Selfrot · Jan 3, 2013

If you have a few divs set up like this (Not exactly, but you get the point);

Code:

<style>
.some_expander {
width: 65%;
background: url("/roflcopter.png");
height: auto;
}
.content {
width: 100%;
background: rgb(28, 28, 28);
height: auto;
}
</style>
<div class="some_expander">
<div class="content">
<div class="the_sidebar">
</div>
</div>
</div>

Then a simple:

Code:

.the_sidebar {
height: auto;
}

- should be all that you need to add, since it should increase it's height if the content and expander changes.

Setting Height too 100% will only increase it so much.

You can also try adding: margin-bottom: -40px;

Matt Clarke · Jan 3, 2013

This is the HTML of the sidebar on the page.

Code:

        <div class="sidebar">
          <div class="sidebar-panel">
            <div class="sidebar-splitter"></div>
                <div class="sidebar-header">Need Help?</div>
                <div class="sidebar-content">
    				Post a ticket and one of our representatives will be deal with your problem when they are next available.
                    <a href="#ticket" class="post-ticket">Post a Ticket!</a>
		  </div>
          
            <div class="sidebar-splitter-flip"></div>

          </div>
          
            <div class="sidebar-panel">
            <div class="sidebar-splitter"></div>
                <div class="sidebar-header">Recommend Us!</div>
                <div class="sidebar-content">
    				Login to Recommend a friend and earn special offers!
                    <br /><a href="login.php" class="top-bar-login-button">Login</a>
                </div>
            </div>
            
            <div class="sidebar-splitter-flip"></div>
          <div class="sidebar-splitter"></div>
          
      </div>
    <div class="clear"></div>

This is the CSS

Code:

.sidebar {
	background-color: #F4F4F4;
	float: right;
	width: 300px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	text-align: center;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
	height: 100%;
	min-height: 100%;
}
.sidebar-panel {
	
}
.sidebar-header {
	color: #666;
	font-family: Tahoma, Geneva, sans-serif;
	text-transform: none;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	padding: 5px;
	margin: 0px;
	
}
.sidebar-content {
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	padding: 5px;
	font-size: 12px;
	
}
.sidebar-splitter {
	background-image: url(../img/sidebar-spitter.jpg);
	background-position: center top;
	height: 17px;
	width: 199px;
	margin-right: auto;
	margin-left: auto;
}
.sidebar-splitter-flip {
	background-image: url(../img/sidebar-spitter-flip.jpg);
	background-position: center top;
	height: 17px;
	width: 199px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

tearhear18 said:
where is the sidebar?
you mean the header or what cant figure out

The box on the right hand side which is a different shade to the actual content. A sidebar isn't a header lol; hence the word Side.

NubPro · Jan 3, 2013

these?

Matt Clarke - CSS Sidebar - Height Needed 100% - RaGEZONE Forums

Matt Clarke · Jan 3, 2013

NubPro said:
these?

Yeah mate, I need the sidebar to go right to the bottom, making sure no white space is there.

Selfrot · Jan 3, 2013

Try this;

position: inherit;
height: 100%;

Do not use the min-height:100%;

Matt Clarke · Jan 4, 2013

Selfrot said:
Try this;

position: inherit;
height: 100%;

Do not use the min-height:100%;

Did not make a difference mate.

NubPro · Jan 4, 2013

can paste everything directly including the images into jsfiddle.net? < it's way more convenient

well there's a way though, but it doesn't do responsively, cuz u gotta do it manually:

height:SPECIFY AN INTEGER;

also provide us the whole html will be simply great

Matt Clarke · Jan 4, 2013

NubPro said:
can paste everything directly including the images into jsfiddle.net? < it's way more convenient

well there's a way though, but it doesn't do responsively, cuz u gotta do it manually:

also provide us the whole html will be simply great

I'll try and PF my router and let you connect to the website itself; then edit things using the Chrome / FF change things. I'll PM you the IP when I get it to work.

CSS Sidebar - Height Needed 100%

Matt Clarke

MC Web Designs

tearhear18

QT is better than VS

TimeBomb

Moderator

jMerliN

Ginger by design.

Selfrot

Junior Spellweaver

Matt Clarke

MC Web Designs

NubPro

Hello!

Matt Clarke

MC Web Designs

Selfrot

Junior Spellweaver

Matt Clarke

MC Web Designs

NubPro

Hello!

Matt Clarke

MC Web Designs

RaGEZONE Sponsor

About RaGEZONE

Forum Statistics

RaGEZONE Partners