右下方对齐的空格键

Question

我无法弄清楚这里有什么阻挡，或者它是不可能的。我想把看起来像一个简单的设计放在一起，右边对齐的侧边栏，侧边栏的内容在底部对齐，主要内容自由流动但不会在侧边栏下面，但我无法正确。这是我能得到的尽可能接近，但我不能让背景沿着整个高度运行。

.main_box {
    width: calc(100% - 300px);
    float:left;
    background-color: green;
}

.side_panel {
    float: right;
    height: 100%;
    background-color: blue;
}

.bottom_nav {
    background-color: red;
    width: 300px;
    position: fixed;
    right: 0;
    bottom: 0;
}

<div class="main_box">
            <div class="side_panel">
                <div class="bottom_nav">
                    <h1>Lorem Ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus, enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla. Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
            <p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
            </div>

Answer 1

当使用position:fixed元素时，您将从正常流中移除，使其父元素为空，就像它不存在一样。

考虑要修复的父元素，然后将内容放在底部：

.main_box {
  width: calc(100% - 300px);
  float: left;
  background-color: green;
}

.side_panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background-color: blue;
}

.bottom_nav {
  background-color: red;
  position: absolute;
  right: 0;
  bottom: 0;
  width:100%;
}

body {
 margin:0;
}

<div class="main_box">
  <div class="side_panel">
    <div class="bottom_nav">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <h1>Lorem ipsum dolor sit amet</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla posuere, nibh convallis tristique imperdiet, risus enim blandit felis, a semper mi arcu sit amet purus. Aliquam urna quam, venenatis et ligula ac, vestibulum efficitur diam. Integer vitae
    metus ac tellus consequat condimentum. Cras iaculis augue eget faucibus vehicula. Etiam facilisis metus ac sapien rutrum placerat. Nulla nibh enim, tincidunt ac suscipit vestibulum, tincidunt ac magna. Integer vestibulum, ligula sed accumsan faucibus,
    enim velit congue lorem, eget consequat eros est nec enim. Vestibulum ac gravida purus. Sed non rhoncus ante. Sed facilisis eros at risus feugiat laoreet. Aliquam imperdiet justo non velit luctus finibus. Proin eget finibus nulla, in congue nulla.
    Proin eget enim eget lorem tincidunt pellentesque. Suspendisse potenti. Morbi lacinia vehicula lacus id efficitur. Nunc fringilla libero augue, sed iaculis lorem efficitur nec.</p>
  <p>Sed vel feugiat enim, at bibendum ex. Mauris id commodo arcu, nec lacinia nulla. Donec rhoncus ex quis urna suscipit condimentum. Suspendisse ante purus, vulputate a lectus efficitur, bibendum dignissim ante. Aliquam nec mollis sapien, placerat hendrerit
    nisi. Nam at tempus nisl. Donec accumsan augue non mauris varius, eu accumsan neque ullamcorper. Aliquam mollis, orci at varius euismod, urna eros pulvinar massa, sit amet viverra nunc arcu a tortor. Nunc pulvinar non erat vel volutpat. Donec eu blandit
    arcu. Vivamus bibendum dolor arcu, ut fringilla ex tincidunt nec. Sed id placerat tortor. Curabitur non tellus sagittis, sodales est vitae, blandit justo.</p>
</div>