【最大10000ポイント】当たる!!質問投稿キャンペーン!

はじめまして。
下記のコードは、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>


このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/04/19 01:09

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

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


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

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

お礼日時:2014/04/19 01:05

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QCSSでボックスのheightが0になる

http://css-happylife.com/

上のサイト(私のサイトではないです)で、

<div id="contentsInner">
<div id="main">
</div>
<div id="sub">
</div>
</div>

という部分があります。
CSSはだいたい下のような感じです。

#contentsInner {
margin:0pt auto;
position:relative;
width:910px;
}
#main {
float:left;
overflow:hidden;
width:500px;
}
#sub {
float:right;
margin-top:20px;
padding:8px 0pt 8px 10px;
width:390px;
}

Firebugで確認したところ、
#mainの大きさは500 x 1552
#subの大きさは390 x 1305
に対し、
#contentsInnerの大きさは910 x 0
と、高さが0になっています。
もちろん、#contentsInnnerに背景画像を設定しても
表示されることはありません。
ブラウザもheight=0と認識しているようです。

なぜ高さが0になってしまっているのでしょうか。
このバグ?の対策を教えてください。
よろしくお願いします。

http://css-happylife.com/

上のサイト(私のサイトではないです)で、

<div id="contentsInner">
<div id="main">
</div>
<div id="sub">
</div>
</div>

という部分があります。
CSSはだいたい下のような感じです。

#contentsInner {
margin:0pt auto;
position:relative;
width:910px;
}
#main {
float:left;
overflow:hidden;
width:500px;
}
#sub {
float:right;
margin-top:20px;
padding:8px 0pt 8px 10px;
width:390px;
}

Firebugで確認したところ、
#mainの大きさは50...続きを読む

Aベストアンサー

http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q16
こちらにあるようにfloadしているボックスの高さは無視されますので、
バグでもなんでもなくて正しい挙動です。
(古いIEではこれを無視しないという誤った挙動をしていました。現在でも互換モードではその動作を継承します。)

http://www.geocities.jp/multi_column/float/05.html
http://www.fsiki.com/archive/css-doc/float.html
こちらが対処のヒントになると思います。

Q左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。

要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。

発想力が足りないのか、基礎的な知識が足りないのか・・・
どちらも足りないとは思いますが、おしえていただければ幸いです。

どうかよろしくお願いいたします。

Aベストアンサー

とりあえずdivでフロートするだけでもよいかと

<style>
#l{
width:200px;
background-Color:blue;
float:left;
}
#r{
width:auto;
background-Color:red;
}
#b{
width:auto;
background-Color:green;
}
</style>
<div id="l">test</div>
<div id="r">test</div>
<div id="b">test</div>

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

QCSS 背景色が下まで伸びません

<body>の中に
<div="wrapper">があり、その中に
<div="main">,<div="menu">を左右にfloatさせています。

<div="wrapper">で囲ってある部分のbackground-colorを
白にしたいのですが、白が下までのびず、<body>の
背景色がそこに出てしまいます。

どうしたら良いのでしょうか?

よろしくお願いします。

Aベストアンサー

><div="wrapper">があり、その中に
><div="main">,<div="menu">を左右にfloatさせています。
この構造だと、#mainと#menuのfloatによって#wrapperの中には「高さを持つ要素が存在しない」ことになっているのは分かっていますか?
floatプロパティの基本知識なので、もし知らなかったなら調べておいてください。
んで、質問者さんと同様の悩みは既に先人が経験していまして、clearfixという技術があります。
https://www.google.co.jp/search?q=css+clearfix
まあ見てもらったら分かりますが、#wrapperの末尾にclear:bothなブロック要素を突っ込んで、中身が全部floatしてても親要素が高さをキープできるようにするという小技です。
やっていることはごく簡単なのですぐに導入できると思います。

Qパーセンテージの出し方

パーセンテージの出し方をおしえてください

Aベストアンサー

主人公÷母体×100

Q【CSS】floatで左右に並べた

CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、この2つのblockレベル要素は高さが違えば下部が不ぞろいになります。
これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか?
text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。

Aベストアンサー

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm
(私が書いた4つ目の方法は、このサイトのパクリです)

CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、
難しい問題がありますね。
私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての
解決方法があるのかも知れません。

参考リンク
http://css.uka-p.com/
http://desperadoes.biz/style/dan/index.php
http://msugai.fc2web.com/web/CSS/colup.html

> 4つ目の方法はなるほどと思いましたが左の文字が多い場合、L字型になってしまいました

4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、
どちらのdivの文字が多くても段組が崩れない方法が紹介されています。
簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。
フッターに使っているdivがあるならば、それを利用してもいいと思います。

http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate0...続きを読む

Qsyntax error, unexpected '}' というエラーの対処法

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" maxlength="3" />
<input type="sbumit" value=回答" />
</form>
<hr />
<?php
session_start();
if(is_null($_SESSION['answer'])){
mt_stand(microtime()*1000000);
$_SESSION['answer']=mt_rand(1,100);
$_SESSION['game_cnt']=0;
}
if($_POST['answer']!=""){
$_SESSION['game_cnt']++;
if($_session['answer']==$_POST['answer']){
print("おめでとうございます".
$_SESSION['game_cnt']."回で正解しました!");
session_destroy();
}else{
if($_SESSION['answer']>$_POST['answer']){
print("もう少し大きいです。");
}else
print("もう少し小さいです。");
}
}
}
?>
</body>
</html>
それとこの間違えたところをなおしたあとはいつもコンピュータを再起動しないと修正したところが適用されないのですがほかに方法はないですか?基本的な質問ですいません。

PHPを習い始めて三日目になるのですがParse error: syntax error, unexpected '}' in C:\Program Files\Apache Group\Apache2\htdocs\****\****\game.php on line 33
というエラーがでるのですが33行目前後のどこをなおせばいいのでしょうか?
・game.php
<html>
<head>
<title>数当てゲーム</title>
</head>
<body>
<h1 style="background:#cccccc">数当てゲーム</h1>
<form method="POST" action="game.php">
1~100までの数を入力してください
<input type="text" name="answer" size="5" max...続きを読む

Aベストアンサー

print("もう少し大きいです。");
}else
print("もう少し小さいです。");
のelseの後に{がないようですが、大丈夫でしょうか?


人気Q&Aランキング