Question

我试图在文档的右侧和左侧装饰边框，但由于某种原因，我没有设法使这些边框装饰的元素达到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;
}

并且没有我尝试的东西，那些元素之前和之后总是保持与视口一样高。我已经尝试在HTML元素上设置min-height为100％，确实使html元素与body一样长，但那些带有饰品的元素仍然保持与视口一样高......

Answer 1

将正文设置为position: relative，因此它将是伪元素的上下文，而不是html，并将bottom: 0设置为两个伪元素：

＆＃13;

body {
  position: relative;
  background-image: url('../img/bgtile.png');
  background-repeat: repeat;
  background-color: transparent;
}

.content-demo { 
  height: 800px;
}

body:before {
  content: "";
  background: red;
  width: 30px;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
}
body:after {
  content: "";
  background: blue;
  width: 30px;
  display: block;
  right: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
}

＆＃13;

<div class="content-demo"></div>

＆＃13;

如何使用css在体内设置100％高度的列

1 个答案: