带边框自适应宽度100%的解决办法
带边框自适应宽度100%的解决办法
落落的月 发表于3年前
带边框自适应宽度100%的解决办法
  • 发表于 3年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 父容器宽度固定,子容器宽度100%,并且带边框
<!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

标签: 宽度100% 带边框
共有 人打赏支持
粉丝 17
博文 32
码字总数 7886
×
落落的月
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: