无法使一个div高度移动/与另一个相等

时间:2014-05-17 20:38:44

标签: html css height width

我无法将一个div高度移动到另一个/相等。我需要这些是相同的,因为左侧边栏将有更多的内容,但我仍然希望正确的div高度与它一起移动作为侧边栏。

<div id="maincontainer">
     <div class="contentcontainer">

    <div class="postcontentcon">Nam eu auctor enim, id tincidunt dolor. Sed et lacinia sem. Donec pretium quam eget nunc vestibulum, vel sagittis nibh bibendum. Fusce eleifend sagittis ultrices. Nullam lobortis ultricies justo, nec tempus metus sollicitudin at. Proin sit amet turpis a orci ullamcorper pulvinar id vitae erat. Fusce sodales iaculis nulla ac faucibus. Vivamus blandit placerat nunc, nec dictum velit tincidunt in. Pellentesque elementum odio metus, eget fringilla nisi imperdiet quis. Etiam facilisis magna pellentesque lorem luctus condimentum. Nulla blandit ac ligula nec aliquam. Cras massa felis, condimentum condimentum ligula in, pharetra fermentum felis. Proin sed lorem interdum, lobortis lectus non, porta tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

    <div class="postsidebarcon">Hello</div>



 </div>

CSS

 body { background-color:#606061; }

 .contentcontainer {
margin:0 auto;
position:relative;
width: 1017px;
height:auto;
 }

 .postcontentcon {
margin:0 auto;
position:relative;
width: 694px;
background-color:#525253;
float:left;
  }

 .postsidebarcon {
margin:0 auto;
position:relative;
width: 323px;
height:inherit;
background-color:#484848;
float:left;
 }

1 个答案:

答案 0 :(得分:0)

你有几种方法可以做到:

  1. display:flex并调整容器大小,默认会绘制孩子 并排 demo
  2. 父亲+ display:table上的
  3. width和儿童+ display:table-cell;上的width demo
  4. 清除花车。 float第一个元素,将margin设置为second,添加一个伪clear:both(或left / right demo
  5. faux-column技术,虽然父容器有一个固定的width,但很古老但很实,很好,我们的想法是将列绘制到父background上: demo < / strong>(这里我使用渐变演示,但通常它是一个图像。你现在可以使用多个背景。
  6. 还有其他棘手的方法:浮动和放大hudge高度,负边距,溢出。有些人甚至会使用绝对定位,但你应该远离使用它们。