幅100％、マージンが自動で、マージンが足りない - 底辺

Question

これはおそらく簡単な質問ですが、どうすればいいか分かりません。 幅は100％、高さはautoです。下から200ピクセルを隠したいが、margin-bottom: -200pxは機能していない。

.banner { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.banner-photo { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.banner-photo img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="banner"> 
 
    <div class="banner-photo"> 
 
    <img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/> 
 
    </div> 
 
</div>

Answer 1

次のようなdiv要素を作成することができ、それが効果的に下から200pxのあるものは何でも非表示になります：

div { 
    height: 200px; 
    width: 100%; 
    position: fixed; 
    bottom:0; 
    background-color: white; 
    z-index: 100; 
} 

Answer 2

あなたはあなたのコンテンツに負margin-bottomを必要とする（自分のimg）、およびoverflow: hiddenをコンテナに入れてください。

私はあなたのフィーリンの例から200pxを隠しました - それはあまり表示されないことに注意してください！

.banner { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.banner-photo { 
 
    width: 100%; 
 
    height: auto; 
 
    overflow: hidden; 
 
} 
 

 
.banner-photo img{ 
 
    width: 100%; 
 
    height: auto; 
 
    margin-bottom: -200px; 
 
}

<div class="banner"> 
 
    <div class="banner-photo"> 
 
    <img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/> 
 
    </div> 
 
</div>