CSS 100%高度与填充/边缘这让我疯狂了几天，但实际上，这是我在过去几年里经常遇到的一个问题：如何使用HTML/CSS，使一个元素的宽度和/或高度达到其父元素的100%，并且仍然有适当的填充或边距？所谓“适当”，我的意思是如果我的父元素是200px高个子和我指定height = 100%带着padding = 5px我希望我能得到一个190px高元素border = 5px在所有方面，在父元素中很好地居中。现在，我知道标准的box模型并不是这样指定它应该工作的(虽然我想知道为什么，确切地.)，所以显而易见的答案是行不通的：#myDiv {
width: 100%
height: 100%;
padding: 5px;}但在我看来，必须有某种方法为一个任意大小的父母可靠地产生这种效果。有谁知道完成这个(看似简单的)任务的方法吗？哦，我对IE兼容性不太感兴趣，所以(希望如此)会让事情变得更容易一些。编辑：既然有人问了一个例子，下面是我能想到的最简单的例子：<html style="height: 100%">
<body style="height: 100%">
<div style="background-color: black; height: 100%; padding: 25px"></div>
</body></html>现在的挑战是让黑匣子在所有边缘上显示一个25像素的填充，而页面变大到需要滚动条的程度。
3 回答
九州编程
TA贡献1785条经验 获得超4个赞
display:blockdivpositionfixed, relativeabsolute.
.stretchedToMargin {
display: block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:20px;
margin-bottom:20px;
margin-right:80px;
margin-left:80px;
background-color: green;
}
<div class="stretchedToMargin">
Hello, world
</div>
慕田峪4524236
TA贡献1875条经验 获得超5个赞
#myDiv {
width: calc(100% - 5px);
height: calc(100% - 5px);
padding: 5px;}- 3 回答
- 0 关注
- 418 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消