如何在父级 div 中对齐 divs 并填充它

Question

我使用 bootstrap，并且我想将三个 div 在父级中对齐，没有任何边框：

  <div id="parent" class="col-lg-12">
      <div id="main"> ... </div>
      <div id="leftside"> ... </div>
      <div id="bottom"> ... </div>
  </div>

div #bottom: 从左到右填充父级div的底部高度：100px

div #leftside: 用 100px

从顶部到 div#bottom 填充左侧

div #main: 填充父级的其余部分 div

更新： 我的问题不够准确。我想要这样的东西： jsfiddle.net/kvs72e2j 但没有固定的属性。我希望 div 填充父级，而父级必须填充它的父级，而不是 window.

Answer 1

html:

<div id="parent" class="col-lg-12">
<div id="top">
  <div id="leftside"> ... </div>
  <div id="main"> ... </div>
</div>
  <div id="bottom"> ... </div>

css:

#parent {
    position: relative;
    background-color: black;
}

#top {
    padding-bottom: 100px;
}

#leftside {
    background-color: red;
    float: left;
    width: 100px;
}

#main {
    background-color: blue;
}

#bottom {
    background-color: green;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
}

我刚刚意识到我把它弄得不必要地复杂了。这是一个更简单的解决方案： html:

  <div id="parent" class="col-lg-12">
    <div id="leftside"> ... </div>
      <div id="main"> ... </div>
      <div id="bottom"> ... </div>
  </div>

css:

#parent {
    background-color: black;
}

#leftside {
    float: left;
    min-width: 100px;
    background-color: red;
}

#main {
    background-color: blue;
}

#bottom {
    clear: both;
    background-color: green;
    height: 100px;
}

如何在父级 div 中对齐 divs 并填充它

How to align divs inside parent div and fill it

html

alignment

twitter-bootstrap