如何在父 div 中对齐 div 并填充它答案

【问题标题】：How to align divs inside parent div and fill it如何在父 div 中对齐 div 并填充它
【发布时间】：2015-04-04 03:34:35
【问题描述】：

我使用引导程序，我想将三个 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: 将左侧从顶部填充到 div#bottom 100px

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

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

【问题讨论】：

标签： html twitter-bootstrap alignment

【解决方案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;
}

【讨论】：

非常感谢！不幸的是，我仍然没有解决我的问题。我想得到这样的东西：jsfiddle.net/kvs72e2j 但在这个解决方案中，div 是固定的。我需要他们来填补父母。并且父母必须填写它的父母..