CSS 100%高度,填充/边距

接下来的挑战是让黑盒子在所有边缘都显示25像素的填充,而页面不会变得足够大以至于需要滚动条.

我学习了如何阅读" 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;
}

  Hello, world

box-sizing: border-box;

.box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}

  

    

      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    
  

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

min-height: 100%;
padding: 5px; 

   

      Hello i am padded.
   

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

Hello world.