Html 如何使用css在正文中设置列的100%高度

我试图在文档的左右两侧都添加装饰性边框，但由于某些原因，我未能使带有这些边框装饰的元素达到100%的高度

我现在得到的是：

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-image: url("../img/bgtile.png");
  background-repeat: repeat;
  background-color: transparent;
  font-size: 18px;
}
body:before {
  content: "";
  background: transparent url("../img/frame-ornament-left.png") repeat-y 11px 0px;
  height: 100%;
  width: 30px;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}
body:after {
  content: "";
  background: transparent url("../img/frame-ornament-right.png") repeat-y;
  height: 100%;
  width: 30px;
  display: block;
  right: 0;
  position: absolute;
  top: 0;
  z-index: 0;
}

---

并没有matther我所尝试的，那个些之前和之后的元素总是和视口一样高。我也尝试过将HTML元素的最小高度设置为100%，这确实使HTML元素与主体一样长，但那些带有装饰的元素仍然与视口一样高……

将主体设置为

位置：相对
，因此它将是伪元素的上下文，而不是
HTML
，并将
bottom:0
设置为两个伪元素：


正文{
位置：相对位置；
背景图像：url（'../img/bgtile.png'）；
背景重复：重复；
背景色：透明；
}
.content演示{
高度：800px；
}
身体：以前{
内容：“；
背景：红色；
宽度：30px；
显示：块；
左：0；
位置：绝对位置；
排名：0；
底部：0；
z指数：0；
}
正文：之后{
内容：“；
背景：蓝色；
宽度：30px；
显示：块；
右：0；
位置：绝对位置；
排名：0；
底部：0；
z指数：0；
}
我不需要将它们设置为视口高度。他们已经达到了那个高度，这就是我试图在这里描述的问题……这就是你的意思吗？是的。谢谢我不认为我需要将身体设置为相对。谢谢这就成功了，太好了。这很烦人：）除非你有一个Sass->CSS编译问题，否则只发布编译后的CSS（以及重现问题所需的标记）；