CSS布局固定底部，可变高度

Question

这是我一直在努力解决的问题：

所以，我有这个正确的栏有三个部分（“Arhiva”，“Naznake”和“Svičlanci”）。第一个和第二个具有静态定位并且具有可变高度（基于数据）。第二个确实有一个最大高度。 第三个给我带来了问题。我想将它的底部固定在右侧栏的底部，以及“Naznake”（第二部分）的顶部到底部。到目前为止，它内部只有两个小盒子，但是一旦我将数据库，它将溢出正确的栏。 这是问题所在：   - 如果我使用高度：100％ - 它仍然会溢出前两个元素的高度。   - 如果我使用calc（高度：100％ - 某些值）它会解决这个问题，但是只要第一或第二部分改变它们的高度，它就会再次停止工作。

所以，这是我的dillema - 如何将最低部分的底部固定到其parrent div的底部，以及前面的sibbling div的顶部到底部仍然能够在它大于可用面积？

以下是我的相关HTML：

<div id="articlebar">
    <h1><?php echo lang('ARCHIVE_TITLE');?></h1>
    <section id="archiveSpace"><?php echo $godine->prepare_years($db); ?><div style="clear:both"></div></section>
    <h1><?php echo lang('TAGS');?></h1>
    <section id="tagSpace"><?php echo $tagovi->prepare_tags($db); ?><div style="clear:both"></section>
    <h1><?php echo lang('ALL_ARTICLES');?></h1>
    <section id="artList"><?php echo $others->prepare_others($db); ?><div style="clear:both"></section>
</div>

这是我的相关CSS：

#articlebar {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:200px;
    background: #595959;
    color:#f8f8f8;
    overflow-y: hidden;
}
#archiveSpace, #tagSpace, #artList {
    background:#d6d6d6;
    margin:0 5px;
    padding: 3px 2px;
    max-height:150px;
    overflow-y: auto;
}
#artList {
    overflow-y:auto;
    max-height: none;
    clear:both;
}
#artList a:hover, #artList a:active {
    background: #ffffff;
}
#archiveSpace a, #tagSpace a {
    background: #f8f8f8;
    color: #363636;
    padding: 3px 10px;
    margin: 3px;
    font-size: 12pt;
    height:18px;
    float:left;
    display:block;
    text-decoration: none;
}
#archiveSpace a:hover, #archiveSpace a:active, #tagSpace a:hover, #tagSpace a:active {
    background:#ffffff;
    text-decoration: underline;
}

这是我在GitHub上的完整项目，以便更全面地参考： https://github.com/DavidSili/MySITE 这里引用的文件是views / blog.php和css / style.css

提前谢谢。

Answer 1

我建议使用CSS Flexbox。这允许非常通用的布局，并且是新的widelyy supported。

前两个div需要flex-shrink（你想要的所有内容＆＃34;缩小＆＃34;到它的计算高度）和最后一个div的flex-grow标题的组合（你想要的一切＆＃34;成长＆＃34;或扩展以填补空间。）

请参阅下面的示例以获取完整的工作示例。

＆＃13;

＆＃13;

/* flex-box specific properties */
#parent {
  display: flex;
  flex-direction: column;
}
#child1, #child2 {
  flex-shrink: 1;
  flex-basis: auto;
}
#child3 {
  flex-grow: 1;
}

/* other properties to make this snippet look good */
* {
  box-sizing: border-box;
}
html, body, #parent {
  height: 100%;
  padding: 0;
  margin: 0;
}
#parent {
  background-color: grey;
}
#parent > div {
  background-color: lightgrey;
  margin: 10px;
}
#child1, #child2 {
  resize: vertical;
  overflow: auto;
}

＆＃13;

<div id="parent">
  <div id="child1">Resize this</div>
  <div id="child2">Resize this</div>
  <div id="child3">This will take up rest of space</div>
</div>

＆＃13;

＆＃13;

＆＃13;