Q&A
画像に個人情報らしきものがありますが、大丈夫ですか？
前提・実現したいこと
現在独学でプログラミング学習中で、Airbnbのサイトの模写コーディングをしているのですが、ヘッダー部分が正しく表示されず困っているので対処方法を教えていただきたいです。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
HTMLとCSSで模写を行なっているのですが、ヘッダー部分がうまくできません。
発生している問題・エラーメッセージ
エラーメッセージ
・画像を部分的に表示する。 ・ウインドウの大きさの変化に合わせて画像の大きさも変化する。 ・画像内の文字(Airbnbになって、~)が画像の中の下側に表示されるようにする。 上記を全て満たしたいのですが、どれかを修正すると、他のどれかが実現されないという状況です。 ### 該当のソースコード ```ここに言語名を入力 ソースコード
HTML
<body> <header> <h1 class="top-wrapper"><a>Airbnbホストになって、暮らしをレベルアップ</a></h1> </header>CSS
header{
position:relative;
width:100%;
height:100%;
background-image:url("https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=r:w1440-h960-sfit,e:fwebp-c75");
background-size:cover;
overflow:hidden;
}
.top-wrapper a{
position:absolute;
color:#ffffff;
font-size:34px;
font-weight:700;
margin:0 25px 15px 25px;
bottom:0;
line-height:36px;
}
試したこと
ここに問題に対して試したことを記載してください。
先ほど「エラーメッセージ」の部分の３つの実現したいポイントのそれぞれへの対処方法はググってできました。
補足情報（FW/ツールのバージョンなど）
初めての質問でわかりにくいかもしれませんが、回答よろしくお願いします。その他質問の仕方に不備がございましたらご指摘のほどよろしくお願いします。
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
こんにちは。
height:100%;は親要素にheightの設定がない限り、height:autoと同じです。
そして、height:autoは内容物の高さに合わせます。子要素である.top-wrapperは絶対配置されフローから外れていますので、内容物がない、つまり高さを失います。
参考：
パーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず（＝コンテンツの高さ依存の場合）、この要素が絶対位置指定されていないなら、値は auto になります。
height - CSS: カスケーディングスタイルシート | MDN
解決方法ですが、いろいろあるかと思います。
heightを設定する。.top-wrapperの絶対配置をやめる。
投稿2020/10/13 02:45
編集2020/10/13 02:48総合スコア36960
あなたの回答
tips
プレビュー
