100％幅の1つのdivの後に100％幅のフッターを置きます。

Question

私のフッタを100％幅のdivのすぐ下に置いていますが、position：absoluteを100％幅にしないでください。

.box { 
    width:100%; 
    left:0%; 
    height:700px; 
    position:absolute; 
    margin-top:6%; 
    background-image:url(); 
    background-position-y:90%; 
    background-position-x:50%; 
} 

.footer { 
    background-color:#ffffff; 
    width:100%; 
    height:90px; 
    position:absolute; 
    bottom:-30%; 
    left:0%; 
    box-shadow:0px -5px 0px 0px #c72031; 
} 

HTML：

<div class="box"></div> 

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

https://jsfiddle.net/opj984j7/

Answer 1

ただ、ボックス内にフッターを入れて、下から任意のマージンなしで表示するには、それにbottom: 0;を与えます。またはフッターの高さbottom: -90px;のbottomを減らす、下記表示する：

.box { 
 
    width: 100%; 
 
    left: 0%; 
 
    height: 700px; 
 
    position: absolute; 
 
    margin-top: 6%; 
 
    background: #000; 
 
} 
 
.footer { 
 
    background-color: #ffffff; 
 
    width: 100%; 
 
    height: 90px; 
 
    position: absolute; 
 
    bottom: -90px; 
 
    left: 0%; 
 
    box-shadow: 0px -5px 0px 0px #c72031; 
 
}

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

Answer 2

絶対位置：をこれは、あなたが 場所文字通りすることを可能にする位置の非常に強力なタイプですどんなページ要素でもあなたが望む場所に正確に移動できます。 の位置属性を上、左下、右に設定して の位置を設定します。これらの値は、相対的（または絶対的）に配置された次の 親要素に相対的な値であることに注意してください。そのような親の が存在しない場合、それは要素 自身の元にすべて元の状態に戻り、それ自体がページ自体に相対的に配置されることを意味します。 のトレードオフと覚えておくべき最も重要なことは、絶対的な約 の位置付けは、これらの要素がページの 要素のフローから削除されることです。このタイプの配置を持つ要素は、他の要素の影響を受けず、他の要素に影響を与えません。 この は、絶対に ポジショニングを使用するたびに考慮する必要があります。過剰使用または不適切な使用は、お客様のサイト の柔軟性を制限する可能性があります。

位置が絶対値の要素。 （ビューポートに対して固定されたように配置されているのではなく）最も近い位置にある祖先を基準にして配置されます。

ただし、絶対配置要素に配置された祖先がない場合は、ドキュメント本文を使用し、ページスクロールに合わせて移動します。