html - 右下对齐的空格键

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>