CSS 控制因Html页面高度导致抖动的问题解决方法

问题描述：

在一些情况下，由于网页的内容高度不能被固定，当内容发生变化时，页面的高度也会发生变化，导致网页发生抖动，影响用户的浏览体验。

解决方法：

要解决这个问题，我们需要使用CSS中的一些技巧。以下是一些方法：

1.使用外边距（margin）来撑开容器

将容器的外边距设置为一个较大的值。这样当容器的内容高度发生变化时，外边距将自动扩大以适应最大高度。这种技术的缺点是当內容高度小于容器高度时，它会留下多余的空白。

.container{
    margin-top: 20px;
    margin-bottom: 20px;
}

2.使用min-height或者max-height属性

使用min-height属性来设置容器的最小高度，使其不会小于定义的值。max-height属性则相反，是设置容器的最大高度。

.container{
    min-height: 200px;
    max-height: 400px;
}

示例说明：

<!-- 示例1: margin间距法-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 解决高度抖动问题示例1</title>
    <style>
        .container{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
    </div>
</body>
</html>

<!-- 示例2: min-height/max-height法-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 解决高度抖动问题示例2</title>
    <style>
        .container{
            min-height: 150px;
            max-height: 400px;
            overflow: auto; /* 当内容高度超过最大高度时，启用滚动条 */
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti nam quaerat odio culpa officiis excepturi voluptatibus!</p>
    </div>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS 控制因Html页面高度导致抖动的问题解决方法 - Python技术站

CSS 控制因Html页面高度导致抖动的问题解决方法

相关文章