プロが教えるわが家の防犯対策術！

CSSでfloatした要素の高さを100%にしたい

解決済

  • 質問者：seki4
  • 質問日時：
  • 回答数：3件

はじめまして。
下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。
この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。　heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。

以下コードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
html {
height: 100%;

}

body {
height: 100%;
margin: 0;
position: relative;
}

#root {
background: #ccc;
min-height: 100%;
width: 100%;

}

header {
background: red;
height: 30px;
width: 100%;
}

nav {
background: gray;
float: left;
width: 20%;
height: 400px;
}

section {
background: green;
float: left;
width: 70%;
min-height: 100%; /** <----- なぜか下まで行かない **/
padding: 60px 0;
}

footer {
background: blue;

height: 200px;
width: 100%;
position: absolute;
bottom: -25px;
left: 0;
margin: 0;

}

</style>
</head>
<body>

<div id="root">

<header>header</header>
<nav>nav</nav>
<section>section</section>

<footer>footer</footer>

</div>
</body>
</html>


通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： nanden1548
  • 回答日時：

ＣＳＳを読む限り、何をしたいのか理解できないのですが？・・・


一度紙の上に、全体のレイアウトを書いてみてはいかがでしょうか？・・・
それを掲示いただければ、答えもたくさん出てくるのでは？・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

確かに、他の方に理解していただくには分かりにくかったです。
以後、このような質問の際はレイアウトを表示するなど、工夫をしてみます。
ご指摘ありがとうございます。

通報する
お礼日時：2014/04/19 01:05

No.2ベストアンサー

  • 回答者： taloo
  • 回答日時：

スクロールの処理をどうするかというのが問題なんですが、


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

分かりにくい質問内容だったのにも関わらず、丁寧な説明ありがとうございます。
talooさんに教えて頂いた内容を使って、当方でやってみたところ思った通りの動きになりました。　大変助かりました、ありがとうございました。

通報する
お礼日時：2014/04/19 01:09

No.3

  • 回答者： ORUKA1951
  • 回答日時：

DIVは、HTML5では原則使わない!!!


4.4 Grouping content ― HTML5(
http://www.w3.org/TR/html5/grouping-content.html … )］簡単
に訳すと
「他に適切な要素がないときの最後の手段として、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/CSS …
)
＞height:100%
　ルート要素は、ウィンドウサイズを参照します。下位の要素は直近のstaticで
ないコンテナブロックのサイズを参照します。そうでない場合は自身の内包する
要素のサイズに追随します。
　⇒視覚整形モデル詳細(
http://momdo.s35.xrea.com/web-html-test/spec/CSS …
)

　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. …
＿＿＿<script
src="http://css3-mediaqueries-js.googlecode.com/svn/t …
＿＿＿<![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>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報