cssを使用して列内の高さを100％に設定する方法

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

と私がしようとするものがないmatther、要素の前と後のものは常にビューポートがあるほど高くとどまります。私はHTML要素でも100％にmin-heightを設定しようとしましたが、本体と同じ長さのhtml要素が作成されましたが、それらの要素はビューポートの高さのままです...

Answer 1

本文をposition: relative、それは代わりにhtmlの、疑似要素のコンテキストも、両方の擬似要素にbottom: 0を設定しますので：

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

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