亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

overflow:auto的用法詳解

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

在開(kāi)始正文前，我介紹一下overflow和flex布局的某些用法。
overflow：auto；如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余內(nèi)容。
flex中的屬性
display: flex;
flex-direction: column; 主軸為垂直方向，起點(diǎn)在上沿。
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要多寫(xiě)一些，這樣才會(huì)顯示效果，我這里為了省篇幅。
            </ul>
        </div>

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

要實(shí)現(xiàn)overflow: auto;這個(gè)效果，首先布局，再寫(xiě)樣式。
在樣式中要在最外邊的父盒子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)容自動(dòng)裁剪。

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

效果圖如下：

這里寫(xiě)圖片描述 

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

這里寫(xiě)圖片描述

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

相關(guān)文章

最新評(píng)論