如何让我的侧栏一直延伸到最后？

Question

对于我的网站，如果不给它一个固定的最大高度，我不能让我的侧柱一直延伸到正文柱的末端（它应该根据身体的长度进行调整，这是改变的或者通过正文具有的单词/内容的数量和/或将正文包裹在较小的屏幕中）。请记住，我在底部有一个页脚，它应该占据屏幕的整个宽度，所以我不能做一些让侧栏比任何东西都长的事情，而把其他所有东西都放在正文栏上。

这是我的例子：https://jsfiddle.net/r7g20fvk/

代码如下：

<style>

.sidebar_container {
  float: right;
  width: 70%;
  max-width: 230px;
  margin: 0px 20px 20px 0;
  min-width: 300px;
  /*I can add a min-height until the side column is long enough to reach the entire bottom rather than end after the content runs out, but it doesn't adjust accordingly (to the length of the body column, whether the screen makes the body longer or the amount of text makes the body longer)*/
}

.left {
  overflow: hidden width: 70%;
  line-height: 2;
  font-size: 18px;
}
</style>

<div class="left">
  <h2>Home</h2>
</div>

<div>
  <div class="sidebar_container" style="float: right;">
    <div class="sidebar">
      <h2>Post 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
        <a href="#">Read More</a>

      </p>
    </div>
    <div class="sidebar">
      <h2>Post 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus.. <a href="#">Read More</a></p>
    </div>
    <div class="sidebar">
      <h2>Post 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
        neque, vel mattis arcu semper in...<a href="#">Read More</a></p>
    </div>
    <!--close sidebar-->

  </div>

  <div class="left">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem
      neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper
      tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero
      quis odio tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
      id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu
      enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris.
      Nunc molestie libero quis odio tristique euismod.</p>
  </div>
</div>

有没有办法让它相应地调整？也许将侧栏的宽度设置为屏幕整个宽度的百分比，以便在较小的屏幕尺寸下查看时它不是固定宽度，或者在超小手机屏幕中使其完全消失或其他东西。我正在尝试使其对移动设备友好并根据底部调整其高度。

您认为制作一张表格（有两列，一列作为正文，一列在侧面）是一种更好的方法，可以使网页在移动设备上更友好并自动调整内容的换行方式？或者有没有更好的使用 div 分组的方法？

Answer 1

像这样？：https://jsfiddle.net/xcy9s64g/

诀窍是绝对定位右孩子div：

position: absolute;
right: 0;
top: 0;

当然还有，将父容器定位为相对，为绝对定位提供参考点。然后，您可以为孩子使用百分比。

  #container {
    position: relative;
    width: 100%;
  }

您是否认为制作一张表格（有两列，一列作为主体，一列在 侧面）将是使网页对移动设备友好的更好方法 并自动调整内容的包装？或者有没有 使用 div 分组的更好方法？

使用表格进行布局是个坏主意。如果您想尝试不同的东西，请改用flexbox。

Answer 2

我认为你应该使用 flexbox，希望它能解决你的问题。

请查看codepen solution

body {
  background: #eee;
}

section {
  padding: 10px;
}

h2 {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.main-container {
  background: #fff;
  margin: 10px;
  display: flex;
  /*flex-wrap: wrap;*/
  /*justify-content: space-between;*/
}

.left-container {
  flex: 3 3 70%;
  background-color: #fff;
}

.right-container {
  flex: 1 1 30%;
  flex-direction: column;
  background-color: #ccc;
}

@media screen and (max-width:768px) {
  .main-container {
    display: flex;
    flex-wrap: wrap;
  }
  .left-container {
    flex: 0 1 100%;
    order: 1;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #fff;
  }
  .right-container {
    flex: 0 1 100%;
    order: 2;
    /*change the order of the blocks for smaller screens as you like */
    background-color: #ccc;
  }
}

<body>
  <div class="wrapper">
    <div class="main-container">
      <section class="left-container">
        <h2>Home</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat id. Donec vehicula lorem neque,
          vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu enim a mauris ullamcorper tincidunt
          ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus in mauris. Nunc molestie libero quis odio
          tristique euismod.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus, in iaculis neque aliquam vitae. Ut mattis aliquet mi, eu cursus est placerat
          id. Donec vehicula lorem neque, vel mattis arcu semper in. Aenean venenatis pulvinar sagittis. In eget congue sapien, in semper ligula. Curabitur sagittis mi a lacinia fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
          eu enim a mauris ullamcorper tincidunt ac vel erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia, velit eu eleifend interdum, lacus velit maximus nisi, ut feugiat metus metus
          in mauris. Nunc molestie libero quis odio tristique euismod.
        </p>
      </section>

      <section class="right-container">
        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>

        <article>
          <h2>Post 1</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fringilla vulputate mauris fermentum laoreet. Suspendisse lacinia tincidunt lectus...
            <a href="#">Read More</a>
          </p>
        </article>
      </section>
    </div>
  </div>
</body>