如何使边框拉伸到页面底部？

Question

在以下代码中，html:before边框会一直延伸到页面底部，但html边框只能拉伸内容。更多内容，更多边界。

如何使html边框延伸到页面底部以产生双边框效果而不管内容如何？

＆＃13;

＆＃13;

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;
}

＆＃13;

Lorem <br> ipsum

＆＃13;

＆＃13;

＆＃13;

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