Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

CSS Sidebar - Height Needed 100%

MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
- 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.
 
Last edited:
QT is better than VS
Joined
Jul 29, 2009
Messages
908
Reaction score
389
where is the sidebar?
you mean the header or what cant figure out :D
 
Junior Spellweaver
Joined
Jan 1, 2013
Messages
116
Reaction score
64
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;
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
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;
}

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

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.
 
Joined
Dec 15, 2009
Messages
1,387
Reaction score
236
these?

Matt Clarke - CSS Sidebar - Height Needed 100% - RaGEZONE Forums
 
Junior Spellweaver
Joined
Jan 1, 2013
Messages
116
Reaction score
64
Try this;

position: inherit;
height: 100%;

Do not use the min-height:100%;
 
Joined
Dec 15, 2009
Messages
1,387
Reaction score
236
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
 
MC Web Designs
Joined
Oct 28, 2010
Messages
888
Reaction score
111
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.
 
Back
Top