CSS：ページの内容の高さに異なるZ-インデックスを持つ背景を伸ばすには

私はウェブページを構築していて、背景を（別のZ-インデックスを使って）動的に伸ばす方法を見つけることができませんページフッターの開始。私はjavascript、jquery、cssのアプローチを探していますが、ダイスは探していません。誰でもこれを行う方法を知っていますか？ここに私のコードです：CSS：ページの内容の高さに異なるZ-インデックスを持つ背景を伸ばすには

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

出典

2016-06-12 Magearlik

あなたはフッターのoffsetTopを得るでしょうし、それは、zインデックス#purple_block_rightの高さと

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

はそれが

出典

2016-06-12 10:43:44

これは私が探していたものです。乾杯。 – Magearlik

あなたは大歓迎です！乾杯。 –

どうやってですか？絶対を固定に変更しますか？

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

出典

2016-06-12 10:32:26

ああホープ#grey_block_leftう本当にうわー。それでおしまい。ご協力ありがとうございました。 – Magearlik

いいえ問題はありません：Dはうまくいきました。 –

CSS：ページの内容の高さに異なるZ-インデックスを持つ背景を伸ばすには

答えて

関連する問題