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元素时，您将从正常流程中删除，使其父元素 empty 消失，就像它不存在一样。

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

.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>

右下对齐空格键

1 个答案: