由于导航栏内容从上方移动div

Question

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

配置div位于同一div中的移动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;
 }