第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何防止固定可滾動列表中的隱藏元素?

如何防止固定可滾動列表中的隱藏元素?

收到一只叮咚 2024-01-03 15:52:10
我的下拉列表有問題。如您所見,最后一個可滾動元素被隱藏。當(dāng)我刪除標(biāo)題時,最后一個元素可見,但不與標(biāo)題一起顯示。我找不到問題,因?yàn)槲也幻靼走@里發(fā)生了什么。這已經(jīng)在我的頁面上上線了,所以也許有一個小修復(fù)可以處理所有事情。改變整個設(shè)計(jì)是很困難的。這是我的代碼:#dropdown-menu {  height: 60%;  display: block !important;  position: fixed;  left: 0;  right: 0;  bottom: 0;  top: unset;   width: 100%;  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .2);}#header {  padding-top: 28px;  justify-content: center;  display: flex;  cursor: pointer;  font-size: 12px;  touch-action: none;  padding: 10px 12px;  padding-top: 28px;  margin-bottom: 5px;}#header::before {  content: '';  position: absolute;  height: 4px;  width: 20px;  background: red;  border-radius: 8px;  top: 15px;  left: 50%;  -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%);  transform: translateX(-50%);}#list {  height: 100%;  max-height: unset;  overflow: scroll;  overflow-x: hidden;  font-size: 12px;  position: relative;}#list .element {  height: 30px;  position: relative;  padding: 10px 12px;  display: flex;  background-color: gray;}#list .element:nth-child(even) {  background-color: #f2f2f2;}<div id="dropdown-menu">  <div id="header">    <span>Notifications</span>  </div>  <div id="list">    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element"></span>    <span class="element">Last element</span>  </div></div>
查看完整描述

1 回答

?
明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個贊

出發(fā)height: calc(100% - 58px);_#list


#dropdown-menu {

  height: 60%;

  display: block !important;

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  top: unset; 

  width: 100%;

  box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, .2);

}


#header {

  padding-top: 28px;

  justify-content: center;

  display: flex;

  cursor: pointer;

  font-size: 12px;

  touch-action: none;

  padding: 10px 12px;

  padding-top: 28px;

  margin-bottom: 5px;

}


#header::before {

  content: '';

  position: absolute;

  height: 4px;

  width: 20px;

  background: red;

  border-radius: 8px;

  top: 15px;

  left: 50%;

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}


#list {

  height: calc(100% - 58px);

  overflow: scroll;

  overflow-x: hidden;

  font-size: 12px;

  position: relative;

}


#list .element {

  height: 30px;

  position: relative;

  padding: 10px 12px;

  display: flex;

  background-color: gray;

}


#list .element:nth-child(even) {

  background-color: #f2f2f2;

}

<div id="dropdown-menu">

  <div id="header">

    <span>Notifications</span>

  </div>

  <div id="list">

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element"></span>

    <span class="element">Last element</span>

  </div>

</div>


查看完整回答
反對 回復(fù) 2024-01-03
  • 1 回答
  • 0 關(guān)注
  • 145 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號