2

他の 3 つの div の上に浮かぶ div (オーバーレイ) を取得しようとしています。1 番目 (ホースバナー) と 3 番目 (フッター) の div を少しカットし、2 番目 (ミッドバックグラウンド) を完全にカバーします。フローティング div が 3 番目の div に切り込む量が常に同じになるように、フローティング div が大きくなるにつれて 2 番目の div のサイズが自動的に大きくなるようにします。

html は次のとおりです。

 <body>
    <div id="navigation"> 
    </div>
    <div id="main">
        <div class="overlay">
        </div>

        <div class="horsebanner">
        </div>

        <div class="midbackground">
        </div>

        <div class="footer">
        </div>
    </div>
 </body>

ここにcss：

#main {

width: auto;
height: 650px;
background-color: #FF6;
margin-top: 0;
}

#main .horsebanner {
width: auto;
height: 150px;
background-color: #F90;
margin-top: 0;  
}

#main .midbackground {  
width: auto;
height: 450px;
background-color: #CCC;
margin-top: 0;
}

#main .footer { 
width: auto;
height: 50px;
background-color: #333;
margin-top: 0;
}

#main .overlay {
width: 300px;
height: 100px;
margin-left:100px;
margin-right:100px;
background-color:#0F0;
position: absolute;
}

私はhtmlの世界に不慣れで、アドバイスを利用できます。繰り返しますが、オーバーレイ DIV が大きくなるにつれて、ミッドバックグラウンド DIV を大きく調整しようとしています。

4

1 に答える 1