底部固定，高度自動，跟隨滾動條滾動

時間 2019-11-13

標籤底部固定高度自動跟隨滾動條滾動简体版

原文原文鏈接

如今的樣式，看起來簡單，但裏面深奧的東西太多，套路太多，仍是本身不夠聰明呀！！！css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    html,
    body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .a1{
        width: 100%;
        min-height: 100%;
        margin-bottom: -80px;
        background: #090;
        overflow: hidden;
    }
    .content{
        padding-top: 9999px;
        margin-top:  -9999px;
        background: #900;
        padding-bottom: 80px;
    }
    .a2{
        width: 100%;
        height: 80px;
        background: #009;
    }
    </style>
</head>
<body>
<div class="a1">
    <div class="content">
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        <!-- test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />test<br /> -->

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

相關標籤/搜索