CSS Sidebar - Height Needed 100%

[Matt Clarke]

You must be registered to see links

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

        <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

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

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

 

[TimeBomb]

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

 

[jMerliN]

I would recommend a flexbox.

 

[Selfrot]

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

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

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

This is the HTML of the sidebar on the page.

        <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

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

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]

these?

 

[Matt Clarke]

these?

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

 

[Selfrot]

Try this;

position: inherit;
height: 100%;

Do not use the min-height:100%;

 

[Matt Clarke]

Try this;

position: inherit;
height: 100%;

Do not use the min-height:100%;

Did not make a difference mate.

 

[NubPro]

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]

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.