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>

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

2 个答案: