gpt4 book ai didi

CSS 100% 高度带填充/边距

转载 作者:数据小太阳 更新时间:2023-10-29 09:04:13 25 4
gpt4 key购买 nike

使用 HTML/CSS,我如何制作一个元素,其宽度和/或高度是其父元素的 100%,并且仍然具有适当的填充或边距?

我所说的“适当”是指如果我的父元素是 200px 高并且我指定 height = 100%padding = 5px 我期望我应该得到一个 190px 高的元素,所有边上都有 border = 5px,很好地位于父元素的中心。

现在,我知道这不是标准盒子模型指定它应该工作的方式(尽管我想知道为什么,确切地说......),所以显而易见的答案是行不通的:

#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 像素的填充,而页面不会变得大到需要滚动条。

最佳答案

我通过阅读“PRO HTML and CSS Design Patterns”学会了如何做这些事情。 display:blockdiv 的默认显示值,但我喜欢将其显式化。容器必须是正确的类型; position 属性是fixedrelativeabsolute

.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>

Fiddle来自 Nooshu 的 comment

关于CSS 100% 高度带填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/485827/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com