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

＆＃39; pageright＆＃39;内容高度不固定且有所不同。我想对齐＆＃39; sidebarbottom＆＃39;在＆＃39; pageright＆＃39;的底部。尝试绝对位置＆amp;相对但不起作用。

任何帮助？

Answer 1

这是您尝试实现的目标http://jsfiddle.net/2cUJS/

Answer 2

我找到了解决方案。

下面＆lt; div class =“pagebody”＆gt;＆lt; / div＆gt;会有另一个重复： -

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

这有效！

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

2 个答案: