文档章节

带边框自适应宽度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
前天
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小技巧-自适应椭圆

背景知识: border-radius 属性的基本用法。 难题: 你可能注意到过,给任何正方形元素设置一个足够大的 border-radius,就可以把它变成一个圆形。所用到的 CSS 代码如下所示: 图1.1给元素设...

海说软件
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
21分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
32分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
43分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
55分钟前
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
57分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部