はじめまして。
下記のコードは、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>
No.3
- 回答日時:
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>
No.2ベストアンサー
- 回答日時:
スクロールの処理をどうするかというのが問題なんですが、
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>
分かりにくい質問内容だったのにも関わらず、丁寧な説明ありがとうございます。
talooさんに教えて頂いた内容を使って、当方でやってみたところ思った通りの動きになりました。 大変助かりました、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
HTMLで文字が重なって表示されます
-
<li>の黒い点を消したい。
-
W3Cのソースコードの検証サービ...
-
CSS(0の単位)について
-
form input テキストを上下中央...
-
【HTML&CSS】フッター下部の余...
-
余分な縦スクロールバーが出て...
-
【CSS】ヘッダーの高さが不明の...
-
背景が下まで表示されないんです。
-
ページを拡大縮小でborderが消...
-
CSSで指定した背景画像にリンク...
-
指定したborderの一部が表示さ...
-
ホームページのCSSについて
-
表示倍率を変えるとレイアウト...
-
iPadのSafariでサイトが右側に...
-
CSSで「overflow:scroll」をしてい
-
CSSでテーブルのセルが、a:hove...
-
スクロールボックスを中央に配...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報