Flex頁腳不會隨下拉菜單移動

我遇到下拉菜單使用滾動條擴展頁面的問題，但頁面底部的頁腳不會向下移動。Flex頁腳不會隨下拉菜單移動

例的jsfiddle：https://jsfiddle.net/fmoctax3/

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

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

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

這究竟是爲什麼？如何讓頁腳和主要拓展呢？

來源

2017-06-01 Douglas Gaskell

爲什麼會頁腳的舉動？菜單的位置絕對不會影響任何其他元素。 –

@Paulie_D這就是爲什麼我問，找出原因。我的CSS知識缺乏，我不是想象力的設計師。 –

這就是你的答案。如果你想讓下拉菜單擴展主要元素（我懷疑這是一件很奇怪的事情），那麼你需要刪除絕對位置。 https://jsfiddle.net/fmoctax3/ –

一個選項我可以建議你做出可滾動的下拉菜單，因爲如果你有非常大的下拉菜單，它不是正確的UI。

只需添加下面的CSS，

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

和運用 '滾動' 的CSS到div '菜單'

<div class="menu scroll">

來源

2017-06-01 16:12:00

Flex頁腳不會隨下拉菜單移動

回答

相關問題