文档章节

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

落落的月
 落落的月
发布于 2015/04/09 15:22
字数 137
阅读 15
收藏 0
<!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

© 著作权归作者所有

共有 人打赏支持
落落的月
粉丝 16
博文 36
码字总数 8575
作品 0
大兴
程序员
元素width:100%; 设置padding出现横向滚动条的问题

当我们给块元素设置宽度为100%,然后再设置padding值想让里面的内容有一定的内边距时,会发现此时内边距的效果达到了,但是却出现了横向滚动条, 原因:padding 是边框和里面内容之间的间隙,...

喝醉的熊
04/26
0
0
【CSS】小妙招,各种问题总结方法处理

1.实现div文字溢出自动省略号截取 overflow:hidden; /超过部分不显示/       text-overflow:ellipsis; /超过部分用点点表示/       white-space:nowrap;/不换行/ 2.规定行数的截...

YanBigFeg
08/16
0
0
手机/移动前端开发需要注意的20个要点

第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; 第二个meta标签是iphone设备中的safari私有meta标签,它表示:允...

陈映亮
2014/11/27
0
0
css3:border-box将边框,padding计算都计算在宽度内

.border-box { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box } 这个class可以让元素的宽度始终等于其width的值,不管pad......

爬墙
2016/02/28
817
0
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

这周撸了两款小程序,分享下关键点。

本周撸了两款小程序,在这里总结下开发过程中的小经验,希望对大家有用。 小程序端 我们先说小程序要注意的地方。 ##默认入口转发问题 当一个小程序Page的js文件中存在 onShareAppMessage 方...

阿北2017
28分钟前
2
0
物联网技术很新吗?不!都是旧技术

通常,当我们想到物联网时,我们会想到新的、令人兴奋的现代技术。毕竟,还有什么比不用起床就能通过智能手机告诉咖啡机开始煮晨杯的“未来”更重要呢? 多亏了物联网,我们可以在世界任何地方...

linuxCool
35分钟前
2
0
利用责任链模式设计一个拦截器

前言 近期在做 Cicada 的拦截器功能,正好用到了责任链模式。 这个设计模式在日常使用中频率还是挺高的,借此机会来分析分析。 责任链模式 先来看看什么是责任链模式。 引用一段维基百科对其...

crossoverJie
54分钟前
2
0
属性动画

透明度 alpha 平移translationX/translationY 旋转 rotation 缩放 scaleX/scaleY 多个动画一起AnimatorSet 透明度 ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"alpha" ......

lanyu96
54分钟前
1
0
Docker和Kubernetes如何让DevOps更具效力

缩短time-to-makrt对于任何一家企业都至关重要,这直接决定了客户满意度、市场竞争力乃至盈利能力。但在部署应用时,大多数企业内的IT团队都或多或少会遇到Dev和Ops之间的问题,这两个部门围...

好雨云帮
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部