我是初学者所以请耐心等待。我在侧边栏的底部有一个手风琴和一个位置固定元件。我的问题是，当手风琴打开时，它与位置固定元素重叠。此外，我希望它不会滚动到底部的位置固定元素。我尝试过对div的各种定位，但仍然不行。有人可以赐教。谢谢！
$(function () {
$('.ui.accordion').accordion();
});.ui.vertical.footer.segment {
position: fixed;
bottom: 0;
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="ui sidebar vertical left menu overlay borderless visible">
<div class="ui accordion">
<a class="title item">
<i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i>
</a>
<div class="content">
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
</div>
</div>
<div class="ui vertical footer segment" id="test">
<i class="fa fa-search" aria-hidden="true"></i> Search
<button class="ui button">
Go
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
答案 0 :(得分：0)
我没有找到任何方法css足够干净来解决这个问题。所以我决定寻找一个jQuery解决方案。我在Semantic UI上找到回调的用法时遇到了一些麻烦。总之，我花时间，我希望它能为我赢得一些积分，特别是因为我已经广泛记录了评论代码。
仅在全屏模式下，该操作在该代码段中效果良好，因为我使用$ (window) .resize (function ().
结果如下：
$(function () {
var oUser3233787 = { // variables group name of User3233787 problem.
$mn : $('.ui.accordion'), // jQuery Menu objet
mnC : $('.ui.accordion').height(), // height Menu close
mnO : 0, // height Menu open (unknow for the moment)
Fmn : false, // Flag menu open / close
foH : $('#test').outerHeight(), // room size of footer height
mnX : $(window).height() - this.foH // room place max for the menu, deppending on window height
};
oUser3233787.$mn.accordion({
onOpen: function( v1, v2 ) { // open menu event; (v1, v2 documented nowhere...? )
with (oUser3233787) {
if (mnO == 0) // if menu open hight is unknow
mnO = $mn.height(); // get this one
$mn.height(mnO); // set menu hight to open size
Fmn = true; // set Flag = menu is open
if (mnO > mnX) // if menu hight is out of room place
$mn.height(mnX); // set the menu higt fit to it
}
},
onClose: function( v1, v2 ) { // close menu event
with (oUser3233787) {
$mn.height(mnC); // set menu hight to closed size
Fmn = false; // set Flag = menu is not open
}
}
});
$(window).resize(function() {
with (oUser3233787) {
mnX = $(window).height() - foH; // keep this height for the oUser3233787 group
if (Fmn) { // if menu is open
if (mnO > mnX) // and if his open heigh is too big
$mn.height(mnX); // reduce them at room height
if (mnO < mnX) // but if there is enough room
$mn.height(mnO); // restore his open high complete height
}
}
});
}); // jQuery.ui.vertical.footer.segment {
position: fixed;
bottom: 0;
width: 100%;
}
.ui.accordion {
overflow-y: auto;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="ui sidebar vertical left menu overlay borderless visible">
<div class="ui accordion">
<a class="title item">
<i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i>
</a>
<div class="content">
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
<a class="item active" href="#">
<i class="fa fa-id-badge" aria-hidden="true"></i> Content
</a>
</div>
</div>
<div class="ui vertical footer segment" id="test">
<i class="fa fa-search" aria-hidden="true"></i> Search
<button class="ui button">
Go
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>