質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1016閲覧

DIV要素の大きさを固定して残りを自動計算したい

Qoo

総合スコア1249

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/03 04:05

お世話になります
DIV要素の中で画像とフッター文字を縦に並べて表示したいのですが、
フッターエリアの大きさを固定して、
画面の大きさ合わせて画像エリアを自動計算する方法を模索しております。

フッターエリア(wrapper-common-left-footer)に
height: 100px;を指定しても画面を縦に小さくすると要素は潰れてしまいます

フッターエリアを100px確保して上部にある画像をエリアを小さくしていくにはどのようにすればよいでしょうか

HTML

1 2<div class="wrapper-common"> 3 <div class="wrapper-common-container wrapper-common-left"> 4 5 <!-- 画像 --> 6 <div class="wrapper-common-left-bg"> 7 </div> 8 9 <!-- フッター 部分 --> 10 <div class="wrapper-common-left-footer"> 11 <div class="footer-left"> 12 <img src="img/logo1.png"> 13 <img src="img/logo2.jpg"> 14 <div class="footer-left-p"> 15 <p>株式会社XXXXX</p> 16 <p>xxxxxxxxxxxxxx</p> 17 <p>〒000-0000 xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 18 </div> 19 </div> 20 </div> 21</div> 22 232425 26

CSS

1 2 .wrapper-common{ 3 width: 100%; 4 height: 80%; 5 margin: 0; 6 padding: 0; 7 position:fixed; 8 display: flex ; 9} 10 11.wrapper-common-container { 12 width: 50%; 13} 14 15.wrapper-common-left { 16 background-color: #000; 17} 18 19.wrapper-common-left-bg { 20 height: 85%; 21 background-image: url(img/bg.JPG); 22 background-size: contain; 23} 24 25.wrapper-common-left-footer { 26 height: 100px; 27 background-color: #ccc; 28} 29

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Itta

2020/11/03 04:18

画像サイズなども記述していただけますか?
Qoo

2020/11/03 08:25

画像サイズは特にしておらず、背景で使用したいので background-size: cover; にしました。元画像は6720 × 4480のものを使っていました。
guest

回答1

0

ベストアンサー

下記のようなことでしょうか。

css

1.wrapper-common-left-bg { 2 height: calc(100% - 100px); 3 background-image: url(img/bg.JPG); 4 background-size: contain; 5 background-repeat: no-repeat; 6 background-position: center; 7}

CodePenサンプル

投稿2020/11/03 05:30

編集2020/11/03 14:40
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2020/11/03 08:28

回答ありがとうございます。 こちらを試したところ、 wrapper-common-left-bgの方はいい感じに縮小されるのですが wrapper-common-left-footer の方が画面サイズを小さくすると100px固定ではなく小さくなっていいきます。。
hatena19

2020/11/03 14:39

height: 100px; が設定してあれば100px固定になるはずです。 回答にサンプルを追加しましたのでご確認ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問