overflow:auto怎么用-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“overflow:auto怎么用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，專業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、做網(wǎng)站、電商網(wǎng)站制作開發(fā)、小程序定制開發(fā)、微信營(yíng)銷、系統(tǒng)平臺(tái)開發(fā)，與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營(yíng)銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評(píng)估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

在開始正文前，我介紹一下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要多寫一些，這樣才會(huì)顯示效果，我這里為了省篇幅。
            </ul>
        </div>

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

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

效果圖如下：

overflow:auto怎么用

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

overflow:auto怎么用

“overflow:auto怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)站標(biāo)題：overflow:auto怎么用-創(chuàng)新互聯(lián)
文章來源：http://bm7419.com/article22/iihjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、建站公司、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、動(dòng)態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容