height:100%を使用した入れ子の表示

締切済

質問者：oshiete_goo_gle
質問日時：2014/10/08 03:03
回答数：4件

最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り（background-attachment:fixed）で固定、他は中央配置（max-width:960px)、高さは非固定、全体をボーダーで囲むような感じのデザイン(参照画像 / 緑 : ボーダー / 青 : 背景画像 / 赤 : 各セクション)を作ろうとしているのですが思うようにいきません。
背景を変え、ボーダーなどを付けて確認したのですがheight:100%の入れ子（最初のセクション)を作った際(body > #border > #background > .section)の.sectionでbody内の要素は全てと判定されてるみたいで(.section:last-childを付けて確認)途切れてしまいます。

参照画像のようにするためにはどうすればいいでしょうか？

以下ソースです

*HTML部分

<body>
<div id="border">
<div id="background">
<div class="section">
<p>Section-1st</p>
</div>
</div>
<div class="section">
<p>Section-2nd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-3rd<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-4th<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
<div class="section">
<p>Section-Last<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
</div>
</div>
</body>

*CSS部分

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body,
html {
width: 100%;
height: 100%;
}

body {
border: dotted 5px #95a5a6;
}

#border {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0 auto;
border: solid 5px #34495e;
}

#background {
width: 100%;
height: 100%;
background: #3498db;/*本来なら画像が入ります*/
display: table;/*文字が見やすいように、削除可*/
}

#background > .section {
height: 100%;
display: table;/*文字が見やすいように、削除可*/
background: none;
}

.section p {
display: table-cell;/*文字が見やすいように、削除可*/
text-align: center;/*文字が見やすいように、削除可*/
vertical-align: middle;/*文字が見やすいように、削除可*/
}

.section {
max-width: 960px;
width: 100%;
margin: 0 auto;
background: #fff;
border: solid 5px #2ecc71;
}

body .section:last-child {
border: solid 5px #e74c3c;
}

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： weakweak
回答日時：2014/10/08 18:09

「ソースの#borderで全てを囲むボーダー線は出せないのか」ということですが、先の私の書いたhtml/cssで実現してません？私がしたことは#borderを.wrapperに変えただけです。

他回答者さんが「デザインの為にhtmlは書かない」という話があったので、.wrapperを削る場合は以下のようになると思います(これに関しては単に.wrapperっていう名前が悪いだけで、#mainとかいう名前だったらいいんじゃないのかなとか個人的には思うんですが・・・)。

とにかく、以下のポイントが分かればどのような書き方もできるんではないでしょうか？
・height:100%はブラウザウィンドウのサイズに対して100%で固定。
・min-heightは可変だが最低限の高さを指定する。

```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body{
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
box-sizing: border-box;
border: solid 5px red;
}
.footer{
height: 50px;
background-color: lightgray;
}
.section{
height: 0;/*500pxとかに変えてみて*/
width: 100%;
border: solid 5px blue;
}
</style>
</head>
<body>
<div class="section">Hello1</div>
<div class="section">Hello2</div>
<div class="section">Hello3</div>
<div class="section">Hello4</div>
<div class="section">Hello5</div>
<div class="footer">コンテンツが足りなくても、html,body{height:100%}と、ここがせり上がらない。</div>
</body>
</html>
```

- 0
- 件

通報する

この回答へのお礼

お返事遅くなってすみません
ちょっと質問の仕方が悪かったのでソース変えてもう一度質問します。
もし宜しければ
http://oshiete.goo.ne.jp/qa/8784003.html
までお願いします。

通報する

お礼日時：2014/10/09 02:54

No.3

回答者： ORUKA1951
回答日時：2014/10/08 18:02

＞上のページのソース等見たんですが空divをいくつか使って擬似的に囲むもしくは一番下の要素に背景色をつけpaddingを使ってボーダー線のようにするといった風に対応してるようなんですが

それでしたら、一目瞭然、
・内容を書き換えるときはどうするのだろう・・・
・デザインを変更するときは大変だろうな
　　例えばPC用はこのデザイン、スマホ横置きはこのデザイン、
　　スマホ縦なら・・、印刷にはこのデザイン、スクリーンリーダーには・・
　　検索エンジンにも正しく理解して欲しいし
　　　なんて夢のまた夢(^^)

★とにかく、せっかく『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』のためにスタイルシート使う意味がない!!!
※ されたいことが未だに良く分からないのですが、headerを含めてborderで囲むこともできますが、今回はheader以外をborderで囲んだ。
※ HTMLには文書構造しか書いてないので、デザインは自由に変更できる。ちなみに下記は印刷や携帯電話には適用されない。
※ HTMLもスタイルシートもこんなに簡単・・

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA(右上)で確認済みHTML5+CSS2.1(一部CSS3rgba())です。
★タブは＿に置換してあるので戻す。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<p>アイウエおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん</p>
＿</header>
＿<section style="min-height:300px;">
＿＿<h2>A smaller heading1</h2>
＿＿<p>段落記事</p>
＿</section>
＿<section style="min-height:500px;">
＿＿<h2>A smaller heading2</h2>
＿＿<p>段落記事</p>
＿</section>
＿<section style="min-height:300px;">
＿＿<h2>A smaller heading3</h2>
＿＿<p>段落記事</p>
＿</section>
＿<footer style="min-height:300px;">
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

通報する

お礼日時：2014/10/09 02:56

No.2

回答者： ORUKA1951
回答日時：2014/10/08 08:38

　デザインのためにHTMLは決して書かない!!。

スタイルシートを導入する最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」なのですから。
<body>
　<div class="header">
　　<h1>タイトル</h1>
　</div>
　<div class="section">
　　　<h2>本文</h2>
　　<div class="section">
　　　<h3>項</h3>
　　　<p>HTML4.01では文書構造はclass名で</p>
　　</div>
　　<div class="section">
　　　<h3>項</h3>
　　　<p>段落</p>
　　</div>
　　<div class="section">
　　　<h3>項</h3>
　　　<p>段落</p>
　　</div>
　</div>
　<div class="footer">
　　<h3>文書のフッタ</h3>
　</div>
</body>

HTML5だと
<body>
　<header>
　　<h1>タイトル</h1>
　</header>
　<section>
　　　<h2>本文</h2>
　　<section>
　　　<h3>項</h3>
　　　<p>HTML5ではDIVは原則使わない</p>
　　</section>
　　<section>
　　　<h3>項</h3>
　　　<p>段落</p>
　　</section>
　　<section>
　　　<h3>項</h3>
　　　<p>段落</p>
　　</section>
　</section>
　<footer>
　　<h3>文書のフッタ</h3>
　</footer>
</body>

＞最初のセクションのみ横幅、高さとも一杯に表示、背景画像有り（background-attachment:fixed）で固定、他は中央配置（max-width:960px)、高さは非固定、全体をボーダーで囲むような感じのデザイン(参照画像 / 緑 : ボーダー / 青 : 背景画像 / 赤 : 各セクション)を作ろうとしているのですが思うようにいきません。

　意味が分からないのですが、文書構造とデザインは独立して考えないとうまく行くはずがありません。
　HTMLが上記だとして

　確認ですが
・headerは背景も表示ウィンドウ全体に合わせて一杯に表示
・section1～はheaderに続いているのか
・スクロールして読み進むとheaderは固定されたままなのか
・ウィンドウ幅が狭い、スマホ縦置きの場合は背景画像は伸縮して画面を覆うのか

- 0
- 件

通報する

この回答へのお礼

説明が下手で申し訳ございません。
やろうとしてる事は
ttp://terminalplanning.aero/
ttp://www.emmamethod.com/
ttp://www.jenslehmann.com/#/ambassador
ttp://mageredavid.fr/
上記のようにボーダー線で全てを囲み尚且つヘッダーのみ画面一杯に表示といった感じなのですが
上のページのソース等見たんですが空divをいくつか使って擬似的に囲む
もしくは一番下の要素に背景色をつけpaddingを使ってボーダー線のようにする
といった風に対応してるようなんですが
今回質問したかったことはソースの#borderで全てを囲むボーダー線は出せないのかといった事です。(bodyに付けてるborder: dotted 5px #95a5a6;は確認のために付けたものなので消してもらって構いません)

通報する

お礼日時：2014/10/08 14:59

No.1

回答者： weakweak
回答日時：2014/10/08 05:17

うまくいかない部分はどこのことですか？bodyにかけたborderが画面最下部のコンテンツまですべて内包して欲しいのでしょうか？

それであれば以下のようにwrapperで全体を囲み、そこにborderを設定するといいです。bodyとhtmlに対するheight:100%は、body内のすべてのコンテンツがブラウザのウィンドウサイズ以下であった場合にブラウザウィンドウサイズの高さを確保するためのものです。コンテンツの高さは基本的にはブラウザウィンドウの高さを超えるので、ブラウザウィンドウの高さを超えた分を包むのは.wrapperの仕事です。

以下コピペで確認してみてください。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body{
height: 100%;
margin: 0;
}
.wrapper{
box-sizing: border-box;/*もしくはborderの上下の合計値をmargin-bottomから更に引いてもいい*/
min-height: 100%;
border: solid 5px red;
margin-bottom: -50px;/*footerの高さ分*/
/*box-sizingをしない場合*/
/*margin-bottom: -60px;*/
}
.footer{
height: 50px;
background-color: lightgray;
}
.section{
height: 0;/*500pxとかに変えてみて*/
width: 100%;
border: solid 5px blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="section">Hello1</div>
<div class="section">Hello2</div>
<div class="section">Hello3</div>
<div class="section">Hello4</div>
<div class="section">Hello5</div>
</div>
<div class="footer">コンテンツが足りなくても、html,body{height:100%}と、ここがせり上がらない。</div>
</body>
</html>