尝试使用 CSS 使单独的 div 在页面底部排列

Posted 2023-03-06

【中文标题】尝试使用 CSS 使单独的 div 在页面底部排列

【英文标题】：Trying to make separate divs line up at the bottom of the page using CSS

【发布时间】：2017-08-29 01:12:03

【问题描述】：

对于我目前正在制作的网站，右侧是一个侧边栏，其中包含一些延伸到页面底部的内容。左侧是网站的主要内容，分为几个引导行和列，它们也位于页面底部。 但是，页面的这两个侧面不会在同一位置结束，因此看起来像这样：

I scratched out the name in the picture.

我有一个解决方案，但我想在明天早上实施它之前先在这里询问它是否可行。如果我为右侧的侧边栏设置一个特定的高度，然后为左侧的容器设置特定的高度，并为右侧的内容添加相同的高度，这会在所有浏览器中解决这个问题吗？我在手机和平​​板电脑上隐藏了右侧内容，所以这不是问题。任何帮助将不胜感激。

下面的相关代码，这是右侧的侧边栏，左侧是使用引导程序的几行和几列。

我已经尝试了几种方法来解决这个问题，比如使用间距，但很明显这永远不会在每个浏览器上都有效。如果您需要更多信息，请告诉我。

<div class="test-container testimonials hidden-sm hidden-xs">
  <!--Testimonial Container -->
  <h3>Testimonials &amp; Reviews</h3>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">-Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
  <p class="customer-name">Name</p>

  <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
    lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."
    <p class="customer-name">Name</p>

    <p class="review">"Sed iaculis et enim at aliquet. Fusce eget lorem vel odio aliquam vulputate ut consectetur nisi. Morbi sagittis quis dolor sagittis posuere. Duis porta tellus luctus diam tristique, in sodales odio pretium. Fusce feugiat, neque fringilla auctor mattis,
      lectus mi condimentum diam, et posuere felis ante ut risus. Quisque eget nisi sed ipsum varius interdum. Cras eget diam volutpat, euismod massa id, lobortis erat. Phasellus venenatis pretium urna vitae tempor. Aliquam pharetra orci id blandit posuere."</p>
    <p class="customer-name">-Name</p>
</div>
<!-- End Testimonial Container-->

【问题讨论】：

你能对构成你网站的所有内容做一个小技巧吗？

jsfiddle.net/e2epyk37 抱歉花了一点时间，没有保存。

我还应该包括我正在使用引导程序的框架。

【参考方案1】：

应用 display:flex 到 .container 删除.test-container 上的浮动属性 删除.test-container 上的边距顶部 去掉.content-container上的红色实验边框

fiddle is here

【讨论】：

这就是我要找的。我将不得不考虑更多地使用 flex。谢谢。

欢迎好友：D

【参考方案2】：

您是否想做这样的事情？ （两个div的高度相同，会跟随高一个div的高度，运行下面的代码sn-p） 然后你可以使用弹性。如果您不需要支持较旧的 IE 版本。如果你想支持旧版 IE，那么你需要通过 javascript 来实现。

.wrapper 
  display: flex;
  width: 100vw;
  font-size: 0;


.right-content 
  width: 20%;
  display: inline-block;
  font-size: 16px;
  background-color: green;


.left-content 
  width: 80%;
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
  background-color: red;

<div class="wrapper">
  <div class="left-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  
  <div class="right-content">
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
    <div> Name </div>
  </div>
</div>

【讨论】：

不完全是，我需要左侧最底部的 div 与右侧推荐区域的底部对齐。至少，它似乎没有在小提琴中排队。不过，我根本没有研究过 flex，所以也许这可能会导致解决方案。

您也可以将此问题作为参考***.com/questions/2997767/…

也谢谢你，我会将这个问题和你链接的问题都保存为书签，以防类似问题再次出现。