締切済み

高さ指定を動的にする方法

2012/10/05 01:07

footer部分の高さをmain部分の文章量に応じて、 footer部分の高さを変えたいと思います。 ■main部分の文章量が多く画面がスクロールできる状態は footer部分の高さを200pxにします ■main部分の文章量が少なく画面下に余白ができてしまう場合は footer部分で埋めます header,main,footerの外枠としてcontainerがあります下記のソースコードがヒントになるかと思い少し変えてやっていますがうまくいきません。 *{ margin:0; padding:0; } html,body{ height:100%; } div#footer{ background-image:url(back.jpg); height:100%; min-height: 100%; } body > #container > #footer { height: auto; } ご指導いただけないでしょうか。よろしくお願いいたします。

sunny_11
お礼率0% (0/4)

CSS
回答数3
ありがとう数0

回答全件

ウィンドウの高さは、html,bodyにheight:100%;pos…

2012/10/07 15:28

footerの背景色を指定しない{background-color:t…

2012/10/05 19:47

高さは％で指定ができないので、動的に変化させる場合はJavaScrip…

2012/10/05 10:09

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/07 15:28 回答No.3

ウィンドウの高さは、html,bodyにheight:100%;position:relative;で参照できるようになりますが・・その方法でも期待通りにはなりません。なぜなら内容のない部分までスクロールさせないように・・ユーザーに全部でどこまであるかスクロールバーで判断できるようになっているからです。　堅苦しい説明は置いておいて、似た状態にするには文書全体を<div>、HTML5では<article>で括ってしまえば良いです。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) で検証済みのHTML4.01strictです。タブは＿に置換してあります。 *{ margin:0; padding:0; } は指定しないほうが良いです。他の要素が登場するたびにすべて再設定が必要になりスタイルシートが煩雑になります。 header,section,footerなどセクションを示す名称は複数回登場するものなのでIDではなくclassで指定しましょう。　HTML5では、そのまま書き換えればよくなります。classだと詳細度が低く、かつ複数個所が一度に設定できますから・・ IDはリンクやjavascriptのターゲット、文書内に必ず一度しか登場し得ない要素にのみ使用するほうが楽です。 [HTML5] <body> 　<header></header> 　<section> 　　<section></section> 　　<article> 　　　<header></header> 　　　<section></section> 　　　<footer></footer> 　　</article> 　　<aside> 　　　<h2></h2> 　　</aside> 　</section> 　<footer></footer> </body> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿＿<p>このページでは・・・・</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>見出し</h2> ＿＿＿<p>footer部分の高さをmain部分の文章量に応じて、</p>  ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿＿<dl class="documentHistry"> ＿＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿＿<dd>2012-08-10</dd> ＿＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿＿</dl> ＿＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿</div> ＿</div> </body> </html>

全文を見る

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/05 19:47 回答No.2

footerの背景色を指定しない{background-color:transparent;background-image:none;} でbodyに背景を指定すればすむだけでは？？

全文を見る

ログインすると、全ての回答が全文表示されます。

t_ohta
ベストアンサー率38% (5108/13343)

2012/10/05 10:09 回答No.1

高さは％で指定ができないので、動的に変化させる場合はJavaScriptを使って高さを計算して指定するしかないと思います。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

CSSで、height:100%の中央寄せ
白い背景に、緑色の本文欄(id="container")を中央配置しようと思っています。本文欄の上下に余白はなく、文章量に関係なく画面ぴったりの高さにするために、 html, body, containerのそれぞれにheight:100%、親要素にmargin, padding 0を指定したところ、画面をスクロールさせたところから緑色の背景色が消えています。どのようにすれば解決できるのでしょうか？ *{ margin:0; padding:0; } html, body{height:100%;} #container { height:100%; width:800px; background-color:#0A0; margin:0px auto; }
- ベストアンサー
- HTML
フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css">  </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
CSSについて入力フォームの上下揃い
CSSについて入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですがどうした良いでしょう？
- 締切済み
- HTML
CSS #containerについて
えっと、CSSについての質問です。最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。最初は伸びていたのですが、ヘッダーとフッターを横に１００％にしてから様子がおかしくなりました。減ったーフッターは横に全部伸ばしたくて、コンテイナーは横は余白つけて下にのばしたいのです＞＜どなたか原因がわかる方、対処法わかる方いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div> </div> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div> <div id="sidebar"> </div> </div> <div id="footerbg"> <div id="footer">Footer</div> </div> </div> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
[CSS]　常にフッターは下部に表示　IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> 　　　<div id="container"> 　　　　　<div id="main"><p>内容</p></div> 　　　　　<div id="footer">Copyright</div> 　　　</div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げるとその場所のままです。更新をかけると一番下に移動するのですが、これはIE7では無理なのでしょうか？広げたら一緒にフッター部がくっついていってほしいのですが、わかる方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。外枠を組む所までは上手く行ったのですが中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。（この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
WEB作成時に常にフッターを表示させる方法
こんばんわ。質問お願いします。 WEBのページを作成している際に、フッターを常時ページの一番下に表示させる方法はあるのでしょうか？現在下記CSSスタイルシートのフッター設定をしていたのですが、文章の量が少ない時は、これでページに下にフッターが配置されるのですが、文章の量が多い時には、文章の最後にフッターがあらわれます。 .footer { } .footer { font-size: 18px; } * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto ; height: 100%; margin: 0 auto -4em; } .footer, .push { height: 4em; } そうではなくて、文章の量が多くてスクロールしている際にも画面の一番下にフッターが常に見えている状態にしたいのです。ご存知の方がいましたら、是非ご教授ください。
- ベストアンサー
- Mac
divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。画像のような構成で、100%ボックスの下にフッターを付けたページなのですが、IE6だと左寄せになってしまいます。いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか分からず。どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; 　　text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。それほど複雑な構成ではないシンプルなタグ構造だと思います。ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML

A3プリントで、A1分割で印刷

2023/10/14 09:26

このQ&Aのポイント

MFC-J5630CDW購入設置Windows10パソコンからA3用紙におさまるで印刷すると、A1分割で印刷A3用紙4枚で印刷
A3用紙におさまるで印刷するため、MFC-J5630CDWを使用してWindows10パソコンから印刷します。印刷すると、A1サイズの用紙をA3サイズに分割して印刷し、A3用紙4枚が必要です。
Windows10パソコンからMFC-J5630CDWを使用してA3用紙に印刷します。印刷すると、A1サイズの用紙をA3サイズに分割して印刷し、A3用紙4枚が必要です。

回答を見る