コンテンツに合わせてdivを縦に伸ばす

Question

.welcome-content-wrapクラスをコンテンツに合わせて伸ばすにはどうしたらいいですか？

は私が持っているように、あなたが通常背景画像を追加しないだろうが、私は私が持っているようにそれを行っている理由があることを理解し

.welcome-section{ 
 
\t position: relative; 
 
} 
 

 
.welcome-background{ 
 
\t max-width: 100%; 
 
\t display: block; 
 
\t height: auto; 
 
} 
 

 
.welcome-content-wrap{ 
 
\t position: absolute; 
 
\t top:10%; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 10%; 
 
\t margin: 0 auto; 
 
\t max-width: 800px; 
 
\t background: rgb(0, 0, 0); 
 
\t background: rgba(0, 0, 0, 0.7); 
 
\t text-align: center; 
 
} 
 

 
.welcome-content-wrap img{ 
 
\t display: block; 
 
\t width: 50%; 
 
\t margin: 50px auto; 
 
} 
 

 
.welcome-content-wrap p{ 
 
\t color: #fff; 
 
\t margin: 25px; 
 
} 
 

 
.text-style{ 
 
\t font-family: outstanding; 
 
\t font-size: 0.75em; 
 
}

<div class="welcome-section"> 
 
\t <img class="welcome-background" src="images/menuBackground.jpg"> 
 
\t <div class="welcome-content-wrap"> 
 
\t \t <img src="images/welcomeTransparent.png"> 
 
\t 
 
\t \t <p> 
 
\t \t \t <span class="text-style">WELCOME</span> to Popsie's of Bramhope a modern, local<br> 
 
\t \t \t Yorkshire fish and chip shop. At Popsie's all our food is hand<br> prepared by Popsie's Dad in the shop's kitchen every day. 
 
\t \t </p> 
 
\t \t <p>All our fish is sourced from sustainable sources.</p> 
 
\t \t <p> 
 
\t \t \t We cook fish to order so that it isn't left to dry out under lights,<br> 
 
\t \t \t like in too many chip shops. 
 
\t \t </p> 
 
\t \t <p>Our potatoes are from local Yorkshire & Lincolnshire farms and<br> we pride ourselves on using the best and freshest ingredients.</p> 
 
\t 
 
\t \t <img id="image-m" src="images/shutterstock_164403170.jpg"> 
 
\t \t <img id="image-l" src="images/National-federation-of-fish-logo.png"> 
 
\t \t <img id="image-r" src="images/CSSMSClogo.png"> 
 
\t </div> 
 
</div>

Answer 1

括弧でmax-width: 800pxを削除してくださいあなたのCSSファイルから.welcome-content-wrapクラスのために。

Answer 2

幅：100％;

また、最大幅があるため、それが妨げられていないかどうかを確認することもできます。

Answer 3

私はあなたがそのabsoluteポジショニングをどうすることを目的とするもの全くわからないが、私はあなたがhorizontallyを意味するものではありませをしたと仮定 - それはすでに覆われていたとして - しかしvertically代わりに。

私が正しいとすれば、これはあなたが探しているものかもしれません。私はちょうどそれが簡単に実際の変更を確認するために作るために背景を追加しました：私は何が変わったhttps://jsfiddle.net/tpfqk0v7/

はtop:10%とbottom: 10%、代わりにmargins

追記に切り替えることです。 ）実際にはx軸/水平のラッピングを意味するのであれば、もちろん私の答えは無視されます。