上下滚动条出现的原因及解决办法

最新推荐文章于 2024-03-21 16:44:17 发布

原创最新推荐文章于 2024-03-21 16:44:17 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

WebProgram 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了网页中出现上下滚动条的原因及其解决方案。通过调整元素的定位方式和尺寸设定，可以有效避免不必要的滚动条出现，提升用户体验。

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

上下滚动条出现的原因及解决办法

1.总结

1.1.现象

1.1.1.错误代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>上下滚动条</title>

    <link rel="stylesheet" href="stylereset.css">

    <style type="text/css">

       /*这里绝对定位*/
.myContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 1280px;
    border: dashed;
}

/*这里绝对定位*/
.myBadScrollContainer {
    position: absolute;
    left: 200px;
    right: 50px;
    bottom: 0;
    background: red;
    box-sizing: border-box;
}

/*这里相对定位*/
.myBadScroll {
    position: relative;
    left:50px;
    top: 100px;
   background: green;
}
.myfooter{
    position: relative;
    height:80px;
}
.mysubfooter{
    position: absolute;
    height: 50px;
}

    </style>
</head>
<body>

<div class="myContainer">
    <div class="myBadScrollContainer">
        <div class="myBadScroll">
            content
        </div>
        <div class=”footer”>footer</div>

    </div>
</div>

</body>