overflow:auto怎么用-創新互聯

本篇內容介紹了“overflow:auto怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創新互聯公司是網站建設專家,致力于互聯網品牌建設與網絡營銷，專業領域包括網站建設、做網站、電商網站制作開發、小程序定制開發、微信營銷、系統平臺開發，與其他網站設計及系統開發公司不同，我們的整合解決方案結合了恒基網絡品牌建設經驗和互聯網整合營銷的理念，并將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供全方位的互聯網品牌整合方案！

在開始正文前，我介紹一下overflow和flex布局的某些用法。
overflow：auto；如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其余內容。
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>

要實現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；超出的內容自動裁剪。

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

效果圖如下：

overflow:auto怎么用

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

overflow:auto怎么用

“overflow:auto怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

網站標題：overflow:auto怎么用-創新互聯
文章來源：http://vcdvsql.cn/article22/iihjc.html

成都網站建設公司_創新互聯，為您提供網站設計、建站公司、商城網站、外貿網站建設、云服務器、動態網站

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

overflow:auto怎么用-創新互聯