带边框自适应宽度100%的解决办法

最新推荐文章于 2022-10-25 16:39:02 发布

weixin_34277853

最新推荐文章于 2022-10-25 16:39:02 发布

阅读量671

点赞数

原文链接：https://my.oschina.net/lldy/blog/398037

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style>
        html,body{
            width:100%;
            height:100%;
            padding: 0px;
            margin:0px;
        }

        .parent{
            margin: 0;
            width:100%;
            height:500px;
            position: absolute;
            background-color:darkturquoise;
        }
        .child{
            border:10px solid red;
            margin:auto;
            top:100px;
            bottom:0px;
            right:0px;
            left:0px;
            position: absolute;
            background-color:white;
        }
        .child2{
            border:15px solid black;
            margin:auto;
            top:0px;
            bottom:0px;
            right:0px;
            left:0px;
            position: absolute;
            background-color:white;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            <div class="child2"></div>
        </div>
    </div>
</body>
</html>

效果图，兼容IE7~IE11，Chrome,Firefox