且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS 100%高度,带填充/边距

更新时间:2022-06-02 03:55:31

我学会了如何做这些事情阅读 PRO HTML和CSS设计模式 display:block div 的默认显示值,但我想明确它。容器必须是正确的类型; position 属性固定相对 absolute

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or 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>

小提琴 by Nooshu的评论

Fiddle by Nooshu's comment