css - 将左侧 div 与右侧内容的底部对齐

Question

我的html结构如下：

<div class="pagebody">
 <div class="pageleft">
      <div class="sidebarmenu">
      </div>
      <div class="sidebarbottom">
      </div>
 </div>   <!--  end pageleft  -->

 <div class="pageright">
      ...
      ...
      ...
 </div>   <!--  end pageright  -->

 <div class="clear"></div>

 </div>   <!--  end pagebody  -->

CSS是

.pagebody {
width:960px;
text-align:left;
margin:0 auto;
}
.pageleft {
width:333px;
float:left;
position:relative;
padding:24px 0 0 37px;
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -301px;
}
.pageright {
width:590px;
float:right;
padding-top:29px;
min-height:1200px;
}
.sidebarmenu {
margin-right:72px;
font:15px Helvetica, Arial, sans-serif;
}
.sidebarbottom {
margin-left:10px;
position:absolute;
bottom:0;
    height:301px;
}

“pageright”内容的高度不固定，并且会有所不同。我想将“sidebarbottom”与“pageright”的底部对齐。尝试使用绝对和相对位置但不工作。

有什么帮助吗？

Answer 1

这是你想要达到的目标吗http://jsfiddle.net/2cUJS/

Answer 2

我找到了解决方案。

在 <div class="pagebody"></div> 下面会有另一个重复：-

<div class="pagebody">
  <div class="pageleft">
    <div class="sidebarmenu">
    </div>
  </div>   <!--  end pageleft  -->

  <div class="pageright">
  ...
  ...
  ...
  </div>   <!--  end pageright  -->

  <div class="clear"></div>

</div>   <!--  end pagebody (1) -->

<div class="pagebody">
  <div class="pageleft">
    <div class="sidebarbottom">
    </div>
  </div>   <!--  end pageleft  -->

  <div class="pageright">
   &nbsp;
  </div>   <!--  end pageright  -->

  <div class="clear"></div>

</div>   <!--  end pagebody (2) -->

这行得通！