ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換！
更新通知を受け取って、最新情報をゲット！

CSSテクニックコミュの【CSS】縦100% FireFoxでスクロールすると切れる…。

ログインして参加する

  • mixiチェック
  • このエントリーをはてなブックマークに追加

【CSS】縦100% FireFoxでスクロールすると切れる…。

mixiユーザー 2007年05月08日 22:00

お目に留めていただき、誠にありがとうございます。
色んなサイトを回り、色々と調べたのですが、
解決策が見当たらず、トピックを立てさせていただきました。

縦を100%にして、枠線をつけ、
FireFoxで表示。
その後にスクロールすると1枚目の画像のように、
ファーストビューで見えなかった部分の枠線が消えてしまいます。

2枚目の画像のように、100%指定で枠線を見せる方法はありますでしょうか。

初心者並みの質問で、大変恐縮ですがよろしくお願いします。

以下、私が制作しましたHTMLとCSSになります。

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="txt/css" />
<title>ここにタイトル</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>

<body>
<div id="wrap">
<div id="wrap_in">

<div id="head">
ヘッダー部分ですよ
ブイブイ
</div><!--head-->

<div id="content">
ここはコンテンツ入りますよ。<br />
<br />
はいりまーす<br />
テスト。
</div><!--content-->
</div><!--wrap_in-->
</div><!--wrap-->
</body>
</html>


【CSS】
@charset "utf-8";

*{
margin:0px;
padding:0px;
}

html{
height:100%;
}

body {
height:100%;
background: #FFF;
}


#wrap{
width:956px;
height:100%;
background: #d9d9d9;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-left:auto;
margin-right:auto;
padding-left:2px;
padding-right:2px;
}

#wrap_in{
width:954px;
height:100%;
background: #FFF;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#head{
background:#FFF;
width:954px;
height:100px;
text-align:left;
position:relative;
}

#content{
background:#FFF;
width:944px;
padding:5px;
}

コメント(15)

[1] mixiユーザー 05月08日 22:42

こんなかんじでしょうか。これで#wrapの左右borderではなくbackground-imageとしてその3重線を表示させるという風にする。

<style>

*{
margin:0px;
padding:0px;
}

html{
height:100%;
}
body {
height:100%;
background: #FFF;
}
body > #wrap{
height:auto;
}
#wrap{
width:956px;
height:100%;
min-height:100%;
position:relative;
background: #FFF;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-left:auto;
margin-right:auto;
padding-left:2px;
padding-right:2px;
}
#head{
width:954px;
height:100px;
text-align:left;
position:relative;
}
#content{
width:944px;
padding:5px;
}</style>
</head>

<body>
<div id="wrap">

<div id="head">
ヘッダー部分ですよ
ブイブイ
</div><!--head-->
<div id="content">
ここはコンテンツ入りますよ。<br />
<br />
はいりまーす<br />
テスト。
</div><!--content-->

</div><!--wrap-->
</body>
</html>


min-heightよりheightが優先されるので、firefoxはちゃんと#wrapの高さ100%にしてくれます。そして、飛び出た部分は表示されません。これはCSSのフツーの動作ですが、IEは、親ボックスの内包要素が、親ボックスの高さを超えてしまうと、テーブルのセルのように、自動的に親ボックスの高さを拡張する仕様なので、IEではオッケーなだけです。
そこで、>に対応しているFirefoxらには>を使い、Firefoxその他のモダンブラウザには、min-height:100%を指定し、height:100%を解除することで、高さ100%固定ではなく、最小の高さを100%にします。これで内容要素が伸びても大丈夫になります。たぶん。

[2] mixiユーザー 05月08日 23:44

私も昔同じ状況に直面しました。
で、下記HPで解決しましたよ〜〜。参考にどうぞ。

http://www.stylish-style.com/csstec/ultimate/height100.html

[5] mixiユーザー 05月09日 16:17

Takazudo様、ホラ様、コメントありがとうございます。

カラムに何も入れない常態だと、綺麗になるのですが、
下記のようにカラムに文字を入れたり、カラムが伸びると
やはりラインが切れてしまいます。
ラインを画像にしてみたのですが…。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>

*{
margin:0px;
padding:0px;
}

html{
height:100%;
}

body {
height:100%;
font-size: small;
color: #333;
}

body > #wrap,#content{
height:auto;
}

#wrap{
width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;
background: #FFF url(images/bc_line.gif) repeat-y;
height:100%;
min-height:100%;
position:relative;
padding-left:4px;
padding-right:4px;
}


#head{
width:947px;
height:99px;
text-align:left;
position:relative;
padding-left:5px;
border-bottom:1px #333333 solid;
}

#content{
width:930px;
padding-left:15px;
padding-right:15px;
height:100%;
min-height:100%;
position:relative;
}

#side-menu{
width:199px;
float:left;
border-right:1px #333333 solid;
}

#main-body{
text-align:left;
width:715px;
float:right;
}
</style>
</head>

<body>
<div id="wrap">
<div id="head">
ヘッダー
</div><!--head-->

<div id="content">

<div id="main-body">
メインカラム<br />
</div><!--main-body-->

<div id="side-menu">
左カラム<br />
<br />
<br />
<br />
<br />
<br />
あああ<br />
<br />
<br />
あああ<br />
<br />
<br />
あああ<br />
<br />
<br />
あああ<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
ああああ
</div><!--side-menu-->
</div><!--content-->
</div>
<!--wrap-->
</body>
</html>

[6] mixiユーザー 05月09日 16:18

そうするにはたぶんこういう画像を背景画像にすればいいんではないかと思います
http://album.nikon-image.com/nk/common/img/bg_sidemenu002.gif

こんなページだったとしたら。
http://album.nikon-image.com/nk/

[7] mixiユーザー 05月09日 16:37

Takazudo様
コメントありがとうございます。
作ろうとしているサイトはセンターに配置したもので、
全体がスクロールして下がるサイトなので、
参考にかかれたサイトとはちょっと違います…。
bodyに背景画像として置けば、確かに綺麗に出るのですが、
IEの横サイズによってはズレが生じたりするのです。

[8] mixiユーザー 05月09日 16:40

いえいえ#wrapに指定するのです

[9] mixiユーザー 05月09日 16:45

Takazudo様

コメントありがとうございます。

#wrap{
width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;
background: #FFF url(images/bc_line.gif) repeat-y;
height:100%;
min-height:100%;
position:relative;
padding-left:4px;
padding-right:4px;
}

上記タグで指定してますが…？
ラインは左右に欲しいので、参考の画像とはちょっと違うかと思います…。

[10] mixiユーザー 05月09日 16:54

えーと、このbc_line.gifっておそらく、左右の棒線のみの背景画像ですよね？
この背景画像に、ナビとメインコンテンツの間の縦線を入れた背景画像を指定するという感じです。

[11] mixiユーザー 05月09日 17:00

最初のボーダーで作りました。
これでどうですか？
ちょっと変に色ついていますが、（自分がｗ）見やすいために・・。

*{
margin:0px;
padding:0px;
}

html{
height:100%;
}

body {
height:100%;
background: #FFF;
}
body > #wrap,#wrap_in,#content{
height: auto;
}

#wrap{
width:956px;
height:100%;
background: #d9d9d9;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-left:auto;
margin-right:auto;
padding-left:2px;
padding-right:2px;
}

#wrap_in{
width:954px;
height:100%;
background: #FFF;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#head{
background:#FFF;
width:954px;
height:100px;
text-align:left;
position:relative;
}

#content{
background:#FFF;
width:944px;
padding:5px;
}
#side-menu{
width:199px;
float:left;
border:1px #333333 solid;
background:#cc0000;
}

#main-body{
text-align:left;
width:715px;
float:right;
background:#cc0000;
border:1px #333333 solid;
}
body > #content{
height:auto;
}

</style>
</head>

<body>
<div id="wrap">
<div id="wrap_in">

<div id="head">
ヘッダー部分ですよ
ブイブイ
</div><!--head-->

<div id="content">
<div id="side-menu">
ここはコンテンツ入りますよ。<br />
<br />
はいりまーす<br />
テスト。<p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p>
</div><div id="main-body">
<p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p><p>テスト</p>
</div>
<br clear="all">
</div><!--content-->
</div><!--wrap_in-->
</div><!--wrap-->
</body>
</html>

[12] mixiユーザー 05月09日 17:08

Takazudo様

コメントありがとうございます。
>>5で書いたナビとコンテンツの間のラインは区切りがわかりやすいようにしたもので、本来は入っていないのです…。

ホラ様

コメントありがとうございます！
試してみたいと思います。

[13] mixiユーザー 05月09日 22:51

そりゃつまりこー言うことではないですか？
http://gyauza.egoism.jp/clip/__/hoge.html
heightに指定した%は、親boxの高さが明示的に指定されていないとautoとして扱われます。あとは、floatとclearについて調べてみてください。

[14] mixiユーザー 05月10日 20:55

Takazudo さんの言う通りだと思います
多分ですが、floatで解決できると思いますが、いかがでしょうか？

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう！

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

CSSテクニック

人気コミュニティランキング

困ったときには

関連ワード

mixiで趣味の話をしよう
新規登録（無料）

このページの上部へ