使邊欄高度匹配內容區域

Question

所以，我在佈局時遇到了問題。我希望側邊欄達到內容高度的100％。我試過其他人給出的技巧，但他們沒有工作。我不知道這是否是因爲我的頁面佈局略有不同或東西，但是啊...

代碼：

<div id="page"> 
    <div id="top"> 
     <div id="topwidth"> 
      this is a top bar 
     </div> 
    </div> 
    <div id="leftmenu"> 
     this is a fixed floating menu to the left 
    </div> 
    <div id="wrapper"> 
    <div id="maincontent"> 
     <div class="post"> 
         This is my content area. multiple post divs will be here 
     </div> 
    </div><!-- Main Content--> 
    <div id="sidebar"> 
       Yep... this is where the trouble is; It won't go 100%. 
    </div> <!-- Sidebar --> 
    <div id="clearfix"> 
     ...I tried this. 
    </div> 
</div> <!-- Wrapper --> 
<div id="footer"> 
    This is my footer, it's 100% the width of the page.   
</div> <!-- Footer --> 
</div> <!-- Page --> 

和CSS：

* { 
margin:0px; 
padding:0px; 
border:0px; 
outline:0px; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
cursor:default; 
} 

a { 
transition: color 1s; 
-moz-transition: color 1s; /* Firefox 4 */ 
-webkit-transition: color 1s; /* Safari and Chrome */ 
-o-transition: color 1s; /* Opera */ 
} 

html { 
height:100%; 
width:100%; 
} 

body { 
height:100%; 
width:100%; 
overflow-y: scroll; 
} 

#page { 
width:100%; 
display:block; 
background-color:#FFF; 
    background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%,  #FFFFFF 90%, #BCBCBC 100%); 
     background-image: -webkit-gradient(
      linear, 
      left top, 
      right top, 
      color-stop(0, #BCBCBC), 
      color-stop(0.1, #FFFFFF), 
      color-stop(0.9, #FFFFFF), 
      color-stop(1, #BCBCBC) 
    ); 
} 

#top { 
background-color:#6666ff; 
border-bottom:1px solid #3333ff; 
height:39px; 
width:100%; 
z-index:99; 
position:fixed !important; 
box-shadow:0px 5px 10px rgba(50, 50, 50, 0.5); 
} 

#wrapper { 
margin:0px auto; 
padding-top:50px; 
width:950px; 
text-align:center; 
} 

#leftmenu { 
margin-left:-75px !important; 
z-index:98; 
height:100%; 
width:75px; 
text-align:center; 
position:fixed; 
border-right:15px solid #999fff; 
display:block; 
background-color:#FFF; 
    background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%); 
     background-image: -webkit-gradient(
      linear, 
      left top, 
      right top, 
      color-stop(0, #e5e5e5), 
      color-stop(0.5, #f5f5f5), 
      color-stop(0.95, #f5f5f5), 
      color-stop(1, #e5e5e5) 
    ); 
background-repeat:no-repeat; 
box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5); 
transition: margin-left 0.3s; 
-moz-transition: margin-left 0.3s; /* Firefox 4 */ 
-webkit-transition: margin-left 0.3s; /* Safari and Chrome */ 
-o-transition: margin-left 0.3s; /* Opera */ 
} 

#header:hover { 
margin-left:0px !important; 
} 
#maincontent { 
width:625px; 
height:100%; 
float:left; 
position:relative; 
} 

#clearfix { 
width:100%; 
clear:both; 
} 

#sidebar { 
width:300px; 
height:100%; 
margin-top:5px; 
position:relative; 
float:right; 
} 

#footer { 
text-align:center; 
clear:both; 
height:100%; 
width:100%; 
padding-top:10px; 
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.001) 0%, rgba(255,255,255,1) 100%); 
     background-image: -webkit-gradient(
      linear, 
      left top, 
      left bottom, 
      color-stop(0,rgba(255,255,255,0.001)), 
      color-stop(1,rgba(255,255,255,1)) 
     ); 
} 

Answer 1

我認爲這是你在做什麼？

CSS：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    } 

a { 
    transition: color 1s; 
    -moz-transition: color 1s; /* Firefox 4 */ 
    -webkit-transition: color 1s; /* Safari and Chrome */ 
    -o-transition: color 1s; /* Opera */ 
    } 

html { 
    background-color: #FFF; 
    background-image: -moz-linear-gradient(left , #BCBCBC 0%, #FFFFFF 10%,  #FFFFFF 90%, #BCBCBC 100%); 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     right top, 
     color-stop(0, #BCBCBC), 
     color-stop(0.1, #FFFFFF), 
     color-stop(0.9, #FFFFFF), 
     color-stop(1, #BCBCBC) 
     ); 
    height: 100%; 
    width: 100%; 
    } 

body { 
    height: 100%; 
    overflow-y: scroll; 
    position: relative; 
    width: 100%; 
    } 

#footer { 
    background: #ccc; 
    clear: both; 
    min-height: 150px; 
    padding-top: 10px; 
    text-align: center; 
    } 

#header { 
    background-color: #6666ff; 
    border-bottom: 1px solid #3333ff; 
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5); 
    height:39px; 
    position:fixed; 
    width:100%; 
    z-index:99; 
    } 

#leftmenu { 
    margin-left:-75px; 
    height:100%; 
    width:75px; 
    text-align:center; 
    position:fixed; 
    border-right:15px solid #999fff; 
    display:block; 
    background-color:#FFF; 
     background-image: -moz-linear-gradient(left , #f5f5f5 0%, #f5f5f5 95%, #e5e5e5 100%); 
      background-image: -webkit-gradient(
       linear, 
       left top, 
       right top, 
       color-stop(0, #e5e5e5), 
       color-stop(0.5, #f5f5f5), 
       color-stop(0.95, #f5f5f5), 
       color-stop(1, #e5e5e5) 
     ); 
    background-repeat:no-repeat; 
    box-shadow:0px 0px 10px rgba(50, 50, 50, 0.5); 
    transition: margin-left 0.3s; 
    -moz-transition: margin-left 0.3s; /* Firefox 4 */ 
    -webkit-transition: margin-left 0.3s; /* Safari and Chrome */ 
    -o-transition: margin-left 0.3s; /* Opera */ 
    z-index:98; 
    } 

#maincontent { 
    background: #ccc; 
    float: left; 
    position: relative; 
    width:950px; 
    } 

    #maincontent .post { 
     background: #eee; 
     width:625px; 
     } 

#sidebar { 
    background: #f00; 
    bottom: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 300px; 
    } 

#wrapper { 
    height: 100%; 
    margin:0px auto; 
    padding-top:50px; 
    width:950px; 
    } 

---

HTML：

<div id="header"> 
    HEADER 
</div> 

<div id="leftmenu"> 
    this is a fixed floating menu to the left 
</div> 

<div id="wrapper"> 

    <div id="maincontent"> 
     <div class="post"> 
      This is my content area. multiple post divs will be here 
     </div> 

     <div class="post"> 
      This is my content area. multiple post divs will be here 
     </div> 

     <div class="post"> 
      This is my content area. multiple post divs will be here 
     </div> 

     <div class="post"> 
      This is my content area. multiple post divs will be here 
     </div> 

     <div class="post"> 
      This is my content area. multiple post divs will be here 
     </div>          

     <div id="sidebar"> 
      Yep... this is where the trouble is; It won't go 100%. 
     </div>            

    </div><!--maincontent--> 

</div><!--wrapper--> 

<div id="footer"> 
    FOOTER 
</div>