html - 如何使边框拉伸(stretch)到页面底部？

Question

在下面的代码中，html:before 边框延伸到页面底部，但是 html 边框只延伸到内容一样多。更多内容，更多边界。

如何使 html 边框也延伸到页面底部以提供双边框效果，而不管内容如何？

html{
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: double;
	border-right-style: double;
	border-color: #472400;
	border-width: 20px;
}

html:before{
	content: " ";
  	position: absolute;
        top: 1px;
	left: 5px;
	right: 5px;
	bottom: 1px;
	border: 10px solid #A35200;
	border-top-style: none;
	border-bottom-style: none;
}

Lorem <br> ipsum

Answer 1

html 标签需要相对位置，所以它将是 before 的上下文，高度为 100%。然后只需玩弄之前的左侧和右侧，将它们放在正确的位置。

html{
position: relative; /** to make it the before absolute context parent **/
height: 100%; /** to state the html height for the before **/
border-top-style: none;
	border-bottom-style: none;
	border-left-style: double;
	border-right-style: double;
	border-color: #472400;
	border-width: 20px;
}

html:before{
	content: " ";
  	position: absolute;
        top: 1px;
	left: -14px;
	right: -14px;
	bottom: 1px;
	border: 10px solid #A35200;
	border-top-style: none;
	border-bottom-style: none;
}

Lorem <br> ipsum