Q&A
htmlのソース出したほうがいいと思います。
お世話になります。
ヘッダの一部(下記"div#description")を、1～2行程度の文章を「表示画面の下から24px」の位置に表示したいと考えています。
HTML
1<body> 2<header> // 高さ48px(PC)・108px(スマホ); CSS Gridで指定; position:relative(子要素nav/divの基点) // 3 <h1>タイトルロゴ</h1> 4 <nav id="headerNavi"> // PC・スマホとも右上; absolute // 5 <ul> 6 <li><a href="#!">検索</a></li> 7 <li><a href="#!">English</a></li> 8 <li><a href="#!">お問い合わせ</a></li> 9 </ul> 10 </nav> 11 <nav id="openMenu"> // PCとスマホで表示位置が違う; 共にabsolute // 12 <a href="#!">メニュー</a> 13 </nav> 14 <div id="description"> // 写真の説明文へのリンク; スマホはヘッダ下端・PCは下記#left下端にabsolute // 15 <a href="./写真の説明文へ"><p>写真タイトル » 解説</p></a> 16 </div> 17</header> 18<section id="left"> // 高さ(100vh - 108px -24px); CSS Grid(左40%); PCだと画像が出てスマホだとdisplay:none; // 19</section> 20<section id="main"> // 高さ(100vh - 108px -24px); CSS Grid(右60%); overflow-y:scroll; // 21 <div id="banners">各種固定ページのバナー</div> // flexbox // 22 <div id="whatnew">新着情報をカードで</div> // flexbox // 23 <div id="aboutme">会社説明概要等</div> // flexbox // 24</section> 25<footer> 26 <div>ここは高さ24pxのフッタ</div> 27</footer> 28</body>
といった感じのHTMLで、
PC | ヘッダが上48px固定、左40%が画像(背景)とそのタイトル(下端)、右60%がサイト本体、フッタが下24px固定
スマホ | ヘッダが上108px固定で、PCだと#leftに表示される画像(背景)とタイトルを表示、その下が本体、フッタが下24px固定
になっています。
ここで、PC用サイトだけ、header#descriptionを#left下端に表示したいのですが(スマホ用はヘッダ下端に小さい文字で表示しているので問題は生じない)、ブラウザを開くサイズによってheader#descriptionの中身が1行～3行になります。
CSS
1header div#description{ 2 position:absolute; 3 width:40%; 4 height:auto; /* 文字が1行で収まるとき、高さは2emになる */ 5 top:calc(100vh - 24px - 2em); /* 2emは文字が1行だったときのdivの高さ */ 6 left:0; 7 border:0; 8 margin:0; 9 padding:0; 10 background-color:rgba(0,0,0,0.5); 11 overflow:hidden; 12 z-index:9500; 13 text-align:right; 14} 15header div#description p{ 16 color:#fff; 17 font-size:90%; 18 border:0; 19 margin:0; 20 padding:0.5em 1em; 21 text-indent:0; 22}
このようなCSSを書いたところ、#description内の文字が1行に収まるうちはよいのですが、2行になると#descriptionが「下に」伸びてしまいます。
この#descriptionを下ではなく上に伸びるようにしたいのですが、何か良い方法はありますでしょうか。
CSSのみで実現できるのが理想ですが、jQuery等を使っても構いません。
[追記]
なんでこんな面倒なことを言っているかというと、上記headerと#leftを「写真とそのタイトル」というくくりで1つのインクルードファイルにしていて、数個ある「写真と解説の組み合わせ」をランダムでインクルードしています。その写真の表示位置を、PC版では#leftの背景に、スマホ版ではヘッダの背景にしており、共に「写真の下端」にタイトル(と説明文へのリンク)を出したいのです。
PC版とスマホ版でソースを同一にしたい(≒ソース読み込みで極力条件分岐させたくない)ので、上記のような作りにしています。
回答3件
0
topじゃなくてなんとかbottomを指定できません？
css
1bottom:calc(100vh - 50px - 2em);
投稿2018/01/19 08:34
総合スコア3828
0
Diff
1- top:calc(100vh - 24px - 2em); 2+ bottom: 24px;
普通にbottomでいいのではと思いましたが、こういうことではなかったでしょうか？
投稿2018/01/19 06:13
総合スコア849
説明不足で申し訳ありません。
ヘッダがcss gridで上端108px固定となっており、中央にcalc(100vh - 108px - 24px)のスクロールする領域があり、フッタが下端に24px出ています。
今回「何行になっても下端から24pxのところに出したいdiv」は、訳あってヘッダ(<header></header>)に内包されており、bottom指定してしまうとヘッダの下端から24pxのところに表示されてしまいます。
祖先にstaticではない要素があるということでしょうか。ではabsoluteではなくfixedにするとか。
absoluteのまま、bottomを負の数にするという方法もあるかもしれません。
bottomを負の数、ひょっとしたらいけるかも？という気がしてきました。
試してみます！
bottomを負の数にしてもダメでした。bottomが負≒始点が下がるだけで実質top指定と同じのようです。
0
ベストアンサー
本来は「header」から出した方がやりやすいと思いますが、1つの案として、先にもうひとつ入れ子を作って、bottom設定で固定しておくと高さが無くても基準になるので、その中に#descriptionを設定ではどうですか？
投稿2018/01/20 04:36
総合スコア3523
申し訳ありません、もう少し詳し目に教えて下さい。
「もう一つの入れ子」はheaderを内包する感じで(高さ100vh？)作るということでしょうか？
headerを内包するのでなく、今の#descriptionの位置を「A」として、divでさらに入れ子を作れば、「A」が基準になるので、そこにbottom設定掛ければ良いのかなと、思います。上手く説明できずスミマセン。
・今の#descriptionの位置をtopで下から24pxに固定
・その中にheight:autoなdivを1つ噛ませて、#descriptionからabsoluteでbottom:0に指定
でしょうか？ なんかいける気がしてきたので、今から書いてきます！
できました！！！ ありがとうございました！！
cssは下記のようにしました。
header div#description{
top:calc(100vh - 24px - 10em);
height:10em;
background:none;
} に設定 /* 10em＝あり得ない高さ */
header div#description div#inner{ /* div#descriptionの中にdivを1つ置く */
width:100%;
height:auto;
position:absolute;
bottom:0;
background-color:rgba(0,0,0,0.5);
}
header div#description div#inner p{
text-align:right;
}
追記: レイアウト目的のdivが邪魔くさいので、pをdisplay:block指定して、pにbottomかけたら....とも思いましたが、div入れないとダメみたいでした。
解決されて何よりです。(^^)
勉強になりました。ありがとうございます！
あなたの回答
tips
プレビュー
