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

Question

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

I scratched out the name in the picture.

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

下面的相关代码，这是右边的侧边栏，左边有几行和几列使用bootstrap。

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

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

Answer 1

你可能想做这样的事情吗？（两个div的高度相同，会跟随更高的div的高度，运行下面的代码片段）然后你可以使用弹性。如果您不需要支持旧的 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>

Answer 2

将 display:flex 应用于 .container

移除 .test-container 上的浮动属性

删除 .test-container 上的边距顶部

去掉.content-container

上的红色实验边框

fiddle is here

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

Trying to make separate divs line up at the bottom of the page using CSS

html

css

height

twitter-bootstrap