Making a sidebar full height

HTML & CSS
1

Hi.

So basically I wanna have my #sidebar to go all the way down to the bottom on all monitors and when I zoom in and out, you get it (I hope).

My css:

#wrapper { width:1220px; overflow:hidden; height:100%}

#sidebar { background-image:url(../images/japp.jpg); float:left; width:220px; background-color:#CCFF99; background-repeat:repeat-y; margin-bottom:0;
}

#content { margin: 0 0 0 100px; height:1000px; margin-top:100px; padding-left:200PX; }

div {border:1px solid #333;}

#logo {margin-top:90px; margin-left:145px; padding-bottom:20px; }

.linje {width:190px; margin-left:0; margin-top:20px; color:#FFF;
height: 1px;}

.meny  {line-height:50px; text-align:right; margin-right:35px; margin-top:30px; letter-spacing:5PX; }

.meny li {}

.meny a:link    {color:#90a2bd; text-decoration:none }
.meny a:visited {color:#999}
.meny a:hover   {color:#000}
.meny a:active  {color:#FFF}

.snedstil { letter-spacing:2px; }

.ha {font-style:italic;}

p.menystil {font-family:Verdana, Geneva, sans-serif; font-size:12px; }

p.menystilto {font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#999}

p.rullande {font-family:Verdana, Geneva, sans-serif; font-size:11px; }

#flytande {margin-top:30px; width:100%; }

.under {
	width:500px;
	color:#FFF;
	margin-top:52px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #F0F0F0;
	

}










html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>




<body>

<div id="wrapper">
  <div id="sidebar"><a href="index.html">

  <img id="logo" src="images/Logo.png" width="33" height="33" border="0" />
  </a>

  <hr align="left" class="linje" />


  <ul class="meny">


   <li>
     <p class="menystil"><a href="index.html">HEM</a></p>
   </li>
    <li>
      <p class="menystil"><a href="ommig.html">OM MIG</a></p>
    </li>
      <li>
        <p class="menystil"><a href="arbeten.html">ARBETEN</a></p>
      </li>
        <li>
          <p class="menystil"><a href="kontakt.html">KONTAKT</a></p>
        </li>
          <li>
            <p class="menystil"><a href="övrigt.html">ÖVRIGT</a></p>
          </li>


  </ul>


  </div>
<div id="content">
  <p class="menystilto">KWPWEBDESIGN.SE - <span class="ha">hemsida av</span> <span class="snedstil">KEVIN WILLADS PETERSEN </span></p>

  <hr align="left" class="under" />
  <div id="flytande"> <img src="images/banner.jpg" width="919" height="212" /></div>

</div>
</div>
</body>
</html>

all help is appriciated :slight_smile:

2

With a layout like that, you are better off putting the sidebar background image on the <body> element, as that will cause it to extend to the bottom of the page.

3

You’re right sir.

Thanks :smiley: