CSS: Wie decke ich einen Hintergrund mit einem anderen Z-Index zur Höhe des Seiteninhalts

Also ich baue eine Webseite und ich finde keine Möglichkeit, den Hintergrund (mit einem anderen Z-Index) dynamisch zu dehnen der Anfang der Fußzeile der Seite. Ich habe nach Javascript, jQuery und CSS-Ansätzen gesucht, aber keine Würfel. Weiß jemand, wie man das macht? Hier ist mein Code:CSS: Wie decke ich einen Hintergrund mit einem anderen Z-Index zur Höhe des Seiteninhalts

<html> 
<head> 
    <style> 
     * 
     { 
      list-style: none; 
      text-decoration:none; 
      padding: 0; 
      margin: 0; 
     } 
     html 
     { 
      margin: 0 auto; 
      width: 100%; 
      background: #ccc; 

     } 
     body 
     { 
      margin: 0; 
      padding: 0; 

     } 
     #page 
     { 
      width: 100%; 

     } 
     #grey_block_left 
     { 
      width: 30%; 
      background-color: #333333; 
      height: 100%; 
      left: 0px; 
      top: 0px; 
      position: absolute; 
      z-index: 0; 
     } 
     #purple_block_right 
     { 
      width: 70%; 
      background-color: #9966cc; 
      height: 100%; 
      right: 0px; 
      top: 0px; 
      position: absolute; 
      z-index: 0; 
     } 
     #content 
     { 
      width: 70%; 
      margin: 0 auto; 
      background-color: #fff; 
      height: 1000px; 
      position: relative; 
      z-index: 5; 
      margin-top: 150px; 
      margin-bottom: 50px; 
      padding: 20px; 
     } 
     #footer 
     { 
      position: relative; 
      z-index: 5; 
      width: 100%; 
      height: 300px; 
      background-color: #333; 
      color: white; 
     } 
    </style> 
</head> 
<body> 
    <div id="page"> 
     <div id="grey_block_left"></div> 
     <div id="purple_block_right"></div> 
     <div id="content"> 
      <h1>Content</h1> 
     </div> 
     <div id="footer"> 
     </div> 
    </div> 
</body> 
</html>

Quelle

2016-06-12 Magearlik

Hier finden Sie die offsetTop der Fußzeile erhalten und das würde die Höhe der z-Index #purple_block_right und #grey_block_left

footer_height = document.getElementById("footer").offsetTop 
document.getElementById("grey_block_left").style.height = footer_height + "px"; 
document.getElementById("purple_block_right").style.height = footer_height + "px";

Hoffe, dass es

Quelle

2016-06-12 10:43:44

Ja, das ist, was ich gesucht habe. Prost. – Magearlik

Gern geschehen! Prost. –

Wie wäre es damit? Ändern von absolut zu fest?

<html> 
<head> 
<style> 
    * 
    { 
     list-style: none; 
     text-decoration:none; 
     padding: 0; 
     margin: 0; 
    } 
    html 
    { 
     margin: 0 auto; 
     width: 100%; 
     background: #ccc; 

    } 
    body 
    { 
     margin: 0; 
     padding: 0; 

    } 
    #page 
    { 
     width: 100%; 

    } 
    #grey_block_left 
    { 
     width: 30%; 
     background-color: #333333; 
     height: 100%; 
     left: 0px; 
     top: 0px; 
     position: fixed; 
     z-index: 0; 
    } 
    #purple_block_right 
    { 
     width: 70%; 
     background-color: #9966cc; 
     height: 100%; 
     right: 0px; 
     top: 0px; 
     position: fixed; 
     z-index: 0; 
    } 
    #content 
    { 
     width: 70%; 
     margin: 0 auto; 
     background-color: #fff; 
     height: 1000px; 
     position: relative; 
     z-index: 5; 
     margin-top: 150px; 
     margin-bottom: 50px; 
     padding: 20px; 
    } 
    #footer 
    { 
     position: relative; 
     z-index: 5; 
     width: 100%; 
     height: 300px; 
     background-color: #333; 
     color: white; 
    } 
    </style> 
    </head> 
    <body> 
    <div id="page"> 
    <div id="grey_block_left"></div> 
    <div id="purple_block_right"></div> 
    <div id="content"> 
     <h1>Content</h1> 
    </div> 
    <div id="footer"> 
    </div> 
</div>

Quelle

2016-06-12 10:32:26

Oh hilft Wow wirklich. Das ist es. Danke für Ihre Hilfe. – Magearlik

Kein Problem: D es hat funktioniert. –

CSS: Wie decke ich einen Hintergrund mit einem anderen Z-Index zur Höhe des Seiteninhalts

Antwort

Verwandte Themen