当前位置：网站首页>The head is fixed on the ceiling, less than one screen of footer is fixed on the bottom, and more than one screen scrolls. Pay attention to the notes

The head is fixed on the ceiling, less than one screen of footer is fixed on the bottom, and more than one screen scrolls. Pay attention to the notes

2022-04-22 22:19:00 【Strange looking】 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .warp_height {
            min-height: 100vh;
            padding-bottom: 120px; /* padding-bottom: 120px This is equal to the height of the bottom  */
            box-sizing: border-box;
        }

        .header,
        .footer {
            height: 120px;
            background-color: red;
            width: 100%;
        }

        .header {
            position: sticky;
            top: 0;
            left: 0;
        }
        .content{
            background-color: blue;
            height: 180px;
        }

        .footer {
            margin-top: -120px;/* margin-top: 120px This is equal to the height of the bottom  */
        }
    </style>
</head>

<body>
    <div class="warp_height">
        <div class="header">
             Head , Fix the top , Can't scroll 
        </div>
        <div class="content">
             It's all about content 
        </div>
    </div>
    <div class="footer">
         Bottom , Less than one screen is fixed at the bottom ;
        <br>
         More than one screen , Bottom setting 

    </div>

</body>

</html>

版权声明
本文为[Strange looking]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204221622486523.html

边栏推荐

猜你喜欢

随机推荐