縦組みのコラムページ(レスポンシブ対応)を作成しています。
<p>タグ内の文章は増減します。 文章は右から左へと進み、 指定の幅を超える文字量になると 下に段が増えるようにしたいのですが、 下記cssでは段は増えるものの、<section>要素が<nav>要素と重なってしまいます。html
1 <main> 2 <section> 3 <h2>タイトル</h2> 4 <p> 5 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 6 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 7 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 8 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 9 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 10 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 11 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 12 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 13 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 14 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 15 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 16 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 17 </p> 18 </section> 19 20 <nav> 21 <ul> 22 <li class="pagerCurrent">1</li> 23 <li><a href="#">2</a></li> 24 <li><a href="#">3</a></li> 25 </ul> 26 </nav> 27 </main>
css
1main{ 2 width: 80%; 3 margin: 40px 10%; 4} 5section{ 6 width: 100%; 7 max-width: 100%; 8 writing-mode: vertical-rl; 9 height: 24em; 10 columns: 24em; 11 column-gap:40px; 12} 13 14nav{ 15 text-align: center; 16 margin: 0 auto; 17}
そこで<section>要素の高さを取得し、<nav>要素にmargin-topの値が付与されるようにしましたが、
<section>要素の正確な高さを取得することができません。 どうすればよいでしょうか?jQuery
1function setting(){ 2 var hsize = $('section').outerHeight(); 3 $('nav').each(function() { 4 $(this).css({'margin-top': hsize}); 5 }); 6} 7$(document).ready(function(){ 8 setting(); 9}); 10$(window).on('load', function(){ 11 setting(); 12}); 13$(window).on('resize', function(){ 14 setting(); 15});
動作確認はChromeでしょうか? Firefoxとは違ってバグっているように見えます……
情報に不備があり申し訳ございません。動作確認はChromeとSafariです。Firefoxはそもそも段が増えませんが、推奨環境外なので問題ありません。
部分サポートで気を付ける必要がありますがFirefoxでもウインドウを小さくすれば増えます。heightの指定を外せば高さも取得できますよ。
確認しました。段は増えましたが、取得した値が大きすぎて正確ではなく、nav要素が下がりすぎていました。あと段の高さは指定したいです。
手元で確認したところ、Firefoxにおいては正確でしたが。段の高さについては認識が間違っていると思います
heightに値を入れないと1行あたりが長い文章になってしまいます。
失礼しました。heightはautoでcolumnsの値を変更することで解決しました。
回答1件
あなたの回答
tips
プレビュー