Question

我在使用滚动条扩展页面的下拉菜单时出现问题，但页面底部的页脚不会向下移动。

示例JSFiddle：https://jsfiddle.net/fmoctax3/

＆＃13;

$('.ui.dropdown').dropdown();

＆＃13;

html,
body {
  height: 100vh;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column;
}

.main {
  flex: 1 1 auto;
  background: green;
}

.footer {
  background: orange;
}

.ui.dropdown {
  margin-left: 50vw;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>


<div class="main">
  <div class="ui floating dropdown">
    <label class="ui button">Dropdown</label>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
  </div>
</div>
<div class="footer">
  stuff<br>stuff<br>
</div>

＆＃13;

为什么会发生这种情况？如何让页脚和主页也展开？

Answer 1

我可以建议你制作可滚动下拉列表的一个选项，因为如果你有一个非常大的下拉列表，它就不是正确的用户界面。

只需添加以下css，

.scroll{
  max-height:100px;
  overflow-y:auto;
  width:150px;
}

将'scroll'css应用于div'菜单'

 <div class="menu scroll">

Flex页脚不会随着下拉菜单移动

1 个答案: