CSS百分百高度带有填充/边距

17 浏览
0 Comments

CSS百分百高度带有填充/边距

使用HTML/CSS，如何让一个元素的宽度和高度占它的父元素的100%，同时仍具有适当的填充或边距？

所谓的“适当”是指，如果我的父元素高度为200px，并指定高度为100%和填充为5px，那么我期望我的元素高度为190px，四周边界上有5px的边框，优美地居中于父元素中。

现在，我知道这不是标准盒子模型应该工作的方式（尽管我想知道为什么，确切地说...），因此明显的答案不起作用：

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

但对我来说，似乎必须有某种可靠的方式来为任意大小的父级生成此效果。有人知道如何完成这个（看似简单的）任务吗？

哦，为了记录，我不是非常关心IE的兼容性，所以这应该（希望）使事情变得更容易。

编辑：因为要求一个示例，我想到了最简单的一个：

挑战在于让黑色框在四周边缘都有25像素的填充，而无需页面足够大以需要滚动条。

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

在CSS3中有一个新的属性称为box-sizing，它可以用来改变盒模型计算宽度/高度的方式。

通过将此属性设置为值"border-box"，它可以使应用该属性的元素在添加填充或边框时不会被拉伸。如果您将某物定义为100像素宽，并添加了10像素填充，它仍将是100像素宽。

box-sizing: border-box;

在此处查看浏览器支持信息。它无法为IE7及更低版本提供支持，不过我相信Dean Edward的IE7.js可以添加对其的支持。祝您使用愉快 🙂

0
0 Comments

我学习如何做这些事情是通过阅读《PRO HTML and CSS Design Patterns》。使用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;
}


  Hello, world

Nooshu的评论所示的 Fiddle

0