flex子項內容超出flex容器範圍，flex子項頂部內容被遮住

時間 2019-12-06

標籤 flex 子項內容超出容器範圍頂部遮住欄目 Flex 简体版

原文原文鏈接

flex子項內容超出flex容器範圍，flex子項頂部內容被遮住

咱們常常用flex佈局方式來實現垂直居中對齊，可是當內容高度是動態變化且超出了flex容器的高度時，沒法滾動到頂部，致使頂部的內容沒法訪問。

以往的彈窗效果都是用插件來實現，此次一個簡單的頁面不想引入那麼多插件，本身動手豐衣足食。css

彈窗要求：html

上下左右居中對齊；
須要考慮到內容超過一屏或者不夠一屏的伸縮性；

這些都是簡單貨，代碼以下： jsFiddle效果佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-pop</title>
    <style>
        *{ margin: 0; border: 0; padding: 0;}
        html,body{ height: 100%;}
        .popWrap{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 20px 0; background: rgba(0,0,0,.8);
            display: flex; justify-content: center; align-items: center; box-sizing: border-box; overflow: auto;}
        .popContainer{ width: 80%; border-radius: 5px; background: #fff; padding: 20px; color: #555; line-height: 1.5; }
        .btnBlock{ display: block; margin-top: 20px; width: 100%; height: 40px; line-height: 40px; color: #fff;
            font-size: 14px; background: #007ACC; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="popWrap">
        <div class="popContainer">
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <p>01 <br> 02 <br> 03 <br> 04 <br> 05 <br>  </p>
            <button class="btnBlock">肯定</button>
        </div>
    </div>
</body>
</html>