- ベストアンサー
CSSでfloatした要素の高さを100%にしたい
- CSSでfloatした要素の高さを100%にする方法について教えてください。
- HTMLファイルで<style>タグを使用してCSSを操作していますが、floatした要素の高さを100%にする方法が分かりません。
- height: 100%やmin-height: 100%を試しましたが、うまくいきません。CSSを使用して要素の高さを調整する方法を教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
スクロールの処理をどうするかというのが問題なんですが、 footerをposition:fixedとして表示させるのではなく、 スクロールが必要な高さになる場合はposition:staticのように表示させたい場合は、多くの場合JavaScriptを併用すると思います。 sectionのところを以下の様に変更してみました。 Safari7、IE11で確認。 この書き方は、たしかIE8以下かIE9以下で対応してなかったと思います。（bottomが無視されて、height:autoとして描画されると思います。） footerの bottom:-25px はドキュメントの下にめり込むというか、スクロールさせるのは意図した物なんでしょうか？ sectionの bottom はfooterの表示位置に合わせてください。 section { background: green; /*float: left; 削除*/ width: 70%; /*min-height: 100%; 削除*/ /** <----- なぜか下まで行かない **/ padding: 60px 0; /* 追加 */ position:absolute; top:30px; bottom:175px; left:20%; overflow: auto; /* スクロール用 */ z-index:1;/*ウインドウ高さが約400px以下の場合にメインセクションを優先表示*/ } <section> <p style="height:100px;">section first</p> <p style="height:100px;">section</p> ....繰り返し <p style="height:100px;">section</p> <p style="height:100px;">section last</p></section>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
DIVは、HTML5では原則使わない!!! 4.4 Grouping content ― HTML5( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )］簡単 に訳すと 「他に適切な要素がないときの最後の手段として、div要素を使用する事を強く 勧める。div要素のかわりにより適切な要素を使用するとで、著者のためにはよ り簡単な保守性に、読者にはより良いアクセス性の向上につながる。」 もし使用するならarticle要素を使用すべきですが、今回は header,section,footerがワンセットしかないので不要です。 ＞CSSでfloatした要素の高さを100%にしたい floatは、他の要素から独立しますから、親要素に含まれていないのですから サイズを参照できません。 そもそもfloatを使用すると ・文字サイズや内包要素のサイズが変わると崩れる。 ・本来のfloatの使い方で画像の周囲にテキストを回りこませたりするときの衝 突する。 ・【重要】floatする要素を他の要素より先に書かなければならない。これは文 書構造を飼えることになり望ましくない。 ＞#root { このセレクタの書き方はCSS1のものです。基点となるセレクタを書くようにし ましょう。 ⇒5.3 全称セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#universal-selector ) ＞height:100% ルート要素は、ウィンドウサイズを参照します。下位の要素は直近のstaticで ないコンテナブロックのサイズを参照します。そうでない場合は自身の内包する 要素のサイズに追随します。 ⇒視覚整形モデル詳細( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-height-property ) HTMLを表示してみましたが、その程度でしたら下記のようにしたほうが簡単で しょう。 本当はもっと良い方法があるが・・ リキッドですからウィンドウ幅にも依存しません。スマホから幅広ディスプレイ まで・・ ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> ＿＿<!--[if IE]> ＿＿＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> ＿＿＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> ＿＿＿<![endif]-->＿<link rel="stylesheet" href="css/style.css"> <style media="screen"> <!-- html,body{margin:0;padding:0;height:100%;} h1,h2,h3,h4,h5,h6,p,ul{margin:0 auto;} header{z-index:10;position:relative;} body{min-width:630px;max-width:1000px;width:100%;margin:0 auto;} section{min-height:100%;position:relative;top:-30px;} section h2,section p{margin:0 165px 0 185px;} section * p{margin:0;} section aside,section nav{position:absolute;top:0px;height:100%;} section aside{width:160px;right:0;} section nav{width:180px;left:0;} section h2{margin-top:30px;} footer{height:200px;position:relative;top:-230px;z-index:10;} /* 色 */ html{background-color:silver;} body{background-color:green;} header{background-color:red;} section{background: white;} footer{background: blue;} section nav{background: gray;} section aside{background-color:yellow;} --> </style> </head> <body> ＿<header> ＿＿<h1 id="title">記事タイトル</h1> ＿</header> ＿<section> ＿＿<h2>本文タイトル</h2> ＿＿<p> ＿＿＿本文記事 ＿＿</p> ＿＿<p>この部分の行数を増減して確認する。</p> ＿＿<p style="margin-bottom:200px;">section内の最後の要素</p> ＿＿<aside> ＿＿＿<h3>補足記事</h3> ＿＿＿<p>ここは本文と直接関係ない記事</p> ＿＿</aside> ＿＿<nav> ＿＿＿<h3>目次</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="#some">Some</a></li> ＿＿＿＿<li><a href="#nav">navigation</a></li> ＿＿＿＿<li><a href="#links">links</a></li> ＿＿＿</ul> ＿＿</nav> ＿</section> ＿<footer> ＿＿<h3>A nice footer</h3> ＿</footer> </body> </html>
ＣＳＳを読む限り、何をしたいのか理解できないのですが？・・・ 一度紙の上に、全体のレイアウトを書いてみてはいかがでしょうか？・・・ それを掲示いただければ、答えもたくさん出てくるのでは？・・・
お礼
確かに、他の方に理解していただくには分かりにくかったです。 以後、このような質問の際はレイアウトを表示するなど、工夫をしてみます。 ご指摘ありがとうございます。
お礼
分かりにくい質問内容だったのにも関わらず、丁寧な説明ありがとうございます。 talooさんに教えて頂いた内容を使って、当方でやってみたところ思った通りの動きになりました。 大変助かりました、ありがとうございました。