欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

overflow:auto的用法詳解

  發(fā)布時間：2020-11-19 11:52:49   作者：天下1281   我要評論
這篇文章主要介紹了overflow:auto的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在開始正文前，我介紹一下overflow和flex布局的某些用法。
overflow：auto；如果內(nèi)容被修剪，則瀏覽器會顯示滾動條，以便查看其余內(nèi)容。
flex中的屬性
display: flex;
flex-direction: column; 主軸為垂直方向，起點在上沿。
overflow和flex布局搭配使用

代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>overflow:auto的用法</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />

    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .header{
            width: 100%;
            height: 100px;
            background: #f99;
        }
        .content{
            width: 100%;
            height: 100%;
            overflow: auto;
            background: yellow;
            flex: 1;
        }
        .footer{
            width: 100%;
            height: 100px;
            background: #99f;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">
            <ul>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                <li>111111</li>
                這里的li要多寫一些，這樣才會顯示效果，我這里為了省篇幅。
            </ul>
        </div>

        <div class="footer">
        </div>
    </div>
</body>
</html>

要實現(xiàn)overflow: auto;這個效果，首先布局，再寫樣式。
在樣式中要在最外邊的父盒子container，加入以下樣式：

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

還有就是一定要給html和body給寬度和高度100%；

html,body{
    width: 100%;
    height: 100%;
}

頭部和底部都給固定的高度，一般的app的頭部和底部都是固定的，像微信聊天記錄。

.header{
    width: 100%;
    height: 100px;
    background: #f99;
}
.footer{
    width: 100%;
    height: 100px;
    background: #99f;
}

中間的content給定flex：1，并且加上我們的主角overflow：auto；超出的內(nèi)容自動裁剪。

.content{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: yellow;
    flex: 1;
    }

效果圖如下：

這里寫圖片描述 

中間的內(nèi)容區(qū)可以上下滑動，超出的部分自動裁剪了。
萬變不離其宗，如果在項目中實現(xiàn)某些功能有困難的話，可以先敲一個小demo，比如上文中這個demo，也許有人說so easy，但讓你用react寫一個類似微信的聊天窗口的布局時，你該如何實現(xiàn)？
下面這個是我用react寫的類似于微信聊天窗口的小項目。

這里寫圖片描述

到此這篇關于overflow:auto的用法詳解的文章就介紹到這了,更多相關overflow:auto用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

最新評論