如何使元素在浏览器缩小的时候不会出现留白？

解决网页布局留白问题

最新推荐文章于 2024-05-11 10:40:33 发布

让我看看谁在学习

最新推荐文章于 2024-05-11 10:40:33 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： web前端布局问题

本文链接：https://blog.youkuaiyun.com/weixin_42545184/article/details/82498783

本文详细介绍了如何通过设置CSS的min-width属性来解决在浏览器窗口缩小时，网页布局出现留白的问题。通过实例展示了在不同浏览器窗口大小下，网页布局的变化及解决方案。

1：代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/css1.css" />-->
        <style type="text/css">
            .head {
                width: 100%;
                height: 100px;
                background: red;
                border: 1px solid black;
            }
            
            .head .content {
                width: 980px;
                height: 100px;
                margin: 0 auto;
                border: 1px solid white;
            }
        </style>
    </head>

    <body>
        <div class="wapper">
            <div class="head">
                <div class="content">

                </div>
            </div>
        </div>
    </body>

</html>

2：浏览器展示（全屏）

浏览器缩小时：

解决办法：给父级元素设置一个min-width；这样在浏览器缩小到子元素的宽度时就不会出现留白。

1：代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="css/css1.css" />-->
        <style type="text/css">
            .head {
                width: 100%;
                height: 100px;
                min-width: 980px;
                background: red;
                border: 1px solid black;
            }
            
            .head .content {
                width: 980px;
                height: 100px;
                margin: 0 auto;
                border: 1px solid white;
            }
        </style>
    </head>

    <body>
        <div class="wapper">
            <div class="head">
                <div class="content">

                </div>
            </div>
        </div>
    </body>

</html>

2：浏览器展示(全屏)