Question

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

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的高度，运行下面的代码片段）然后你可以使用flex。如果你不需要支持旧的IE版本。如果你想支持旧的IE，那么你需要通过javascript来实现。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将显示：flex应用于.container

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

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

取出.content-container

上的红色实验边框

fiddle is here

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

2 个答案: