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像素的填充，而页面变大到需要滚动条的程度。

繁华开满天机

浏览 419回答 3

3回答

九州编程

我学会了如何做这样的事情-阅读“PRO HTML和CSS设计模式“.display:block控件的默认显示值。div但我喜欢把它说清楚。容器必须是正确的类型；position属性是fixed, relative，或absolute..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>小提琴努舒评语

0 0

慕田峪4524236

更好的方法是使用calc()属性。所以你的案子看起来是：#myDiv {     width: calc(100% - 5px);     height: calc(100% - 5px);     padding: 5px;}简单，干净，没有解决办法。请确保不要忘记值和操作符之间的空格(例如(100%-5px)，这将破坏语法。好好享受吧！

0 0

随时随地看视频慕课网APP