javascript - 由于上方的导航栏内容而移动 div

Question

我正在使用 Bootstrap 在我的页面上制作导航选项卡。目前我在一个 div 中有两个导航栏。他们工作正常。但是，当我浏览选项卡时，内容会改变高度，导致其下方的导航栏上下移动。我该如何阻止这种情况发生？

配置 div 在同一个 div 中的 Mobile div 之上

例如:

  <div>
    <div class="config"></div>
    <div class="mobile" style="position:inherit;"></div>
  <div>

之前

之后

您还可以看到导航栏线没有对齐，因为移动线比配置导航栏线短。我该如何调整？

Answer 1

不太确定这是否是您要问的，但这里是:

防止内容移动后续 div

您有一个容器 div，其中包含两个子 div。您希望两者都显示在容器的上下文中，但不希望每个都移动另一个的位置。

这是你如何做到的:

.container {
  height: 450px;
  width: 100%;
}
.container div {
  height: 50%;
  overflow: auto;
}

<div class="container">
  <div class="content-panel-1" style="background-color:blue; color:white;">
    <ul>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
    </ul>
  </div>
  <div class="content-panel-2" style="background-color:red; color:white;">
    <ul>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
      <li>A whole bunch of content</li>
    </ul>
  </div>
</div> 

作为旁注:

如果你想帮助对齐，这一点 CSS 应该会极大地改进你的列表布局:

 ul {
   padding: 0;
   margin: 0;
   list-style: none;
 }