在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/UI  HTML/ flex上下布局，上面高度自適應(yīng)。如何解決高度偏小時(shí)下方元素上移的BUG

flex上下布局，上面高度自適應(yīng)。如何解決高度偏小時(shí)下方元素上移的BUG

圖片描述

圖片描述

如圖1，高度偏小時(shí)滾動(dòng)條向下拖動(dòng)，導(dǎo)致下方元素上移。
如何解決？
上方元素給height: calc(100vh - 61px);下方給固定高度(61px)

回答
編輯回答
執(zhí)念

@kikong
top里加了一個(gè)填充的
SF上傳圖片功能掛了，試下唄，瀏覽器高度拉小一點(diǎn)

    <div class="main">
      <div class="top">
        <div class="topL"></div>
      </div>
      <div class="bottom"></div>
    </div>
.main {
    position: absolute;
    left: 0;
    top: 0;
    background-color: aquamarine;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .top {
    height: calc(100vh - 61px);
    /**可以不要**/
    width: 100%;
    background-color: blue;
    flex: 1;
    /**占據(jù)所有剩余空間**/
  }

  .topL {
    height: 800px;
    width: 200px;
    background-color: green;
  }

  .bottom {
    width: 100%;
    height: 61px;
    background-color: red;
    flex-shrink: 0;
    /**不能縮放*/
    flex-grow: 0;
    /**不能縮放*/
  }

---------------分割線-------------
知道怎么做了，我得給綠色一個(gè)Min-height，然后出現(xiàn)滾動(dòng)條就行了

2018年2月18日 05:38
編輯回答
悶騷型
        .main{
            position: absolute;
            left:0;
            top:0;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        .top{
            height: calc(100vh - 61px);/**可以不要**/
            width: 100%;
            background-color: blue;
            flex:1;/**占據(jù)所有剩余空間**/
        }

        .bottom{
            width: 100%;
            height: 61px;
            background-color: red;
            flex-shrink: 0;/**不能縮放*/
            flex-grow: 0;/**不能縮放*/
        }
        
<div class="main">
    <div class="top"></div>
    <div class="bottom"></div>
</div>
2018年7月13日 16:58