页面高度百分百

最新推荐文章于 2023-11-29 12:24:12 发布

原创最新推荐文章于 2023-11-29 12:24:12 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML CSS

前端专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS技术让图片铺满整个屏幕，并实现可滚动的效果，旨在创建一个视觉上连贯且用户体验良好的全屏滚动图片展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让图片铺满,并且可以滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面高度100%</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 给高度 100% 能让图片铺满 并且可以滚动 */
        html,body {
            height: 100%;
        }
        .top {
            height: 10%;
        }
        .wrapper {
            background: url(img/spring2017.jpg) center no-repeat;
            /* background-color: #0000ff; */
            /* width: 100%; */
            height: 100%;
            min-height: 500px;
            min-width: 900px;
        }
        .bottom {
            height: 10%;
        }
    </style>
</head>
<body>
    <div class="top">-----</div>
    <div class="wrapper">
        wrapper
    </div>
    <div class="footer">-------</div>
</body>
</html>