Как сделать границу растянутой в нижней части страницы?

Question

В следующем коде граница html:before простирается до нижней части страницы, но граница html простирается на столько же, сколько и на содержание. Больше контента, больше границы.

Как сделать границу html также растягиваться до нижней части страницы, чтобы обеспечить эффект двойной границы независимо от содержания?

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

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

Lorem <br> ipsum

Answer 1

HTML-тег должен позицию относительно, так что это будет контекст для ранее, и высота 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; 
 
\t border-bottom-style: none; 
 
\t border-left-style: double; 
 
\t border-right-style: double; 
 
\t border-color: #472400; 
 
\t border-width: 20px; 
 
} 
 

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

Lorem <br> ipsum