ぽざうねっと
ホーム
連絡をする
同期する ( RSS 2.0 )
Login
投稿数 420 : 記事 0 : コメント 9718 : トラックバック 76
ニュース
さて、今年は何を漬けようか
書庫
2009年6月 (1)
2009年5月 (6)
2009年4月 (3)
2009年3月 (1)
2009年2月 (1)
2009年1月 (3)
2008年12月 (9)
2008年10月 (8)
2008年9月 (41)
2008年8月 (17)
2008年7月 (9)
2008年6月 (19)
2008年5月 (2)
2008年4月 (10)
2008年3月 (25)
2008年2月 (37)
2008年1月 (53)
2007年12月 (2)
2007年11月 (10)
2007年10月 (7)
2007年9月 (10)
2007年8月 (2)
2007年7月 (5)
2007年6月 (12)
2007年5月 (10)
2007年4月 (19)
2007年3月 (16)
2007年2月 (23)
2007年1月 (19)
2006年12月 (31)
2006年11月 (9)
日記カテゴリ
DB >> MySQL
DB >> Oracle
DB >> SQL Server
dev >> .NET >> ADO.NET
dev >> .NET >> ASP.NET
dev >> .NET >> Forms
dev >> .NET >> Others
dev >> JavaScript
dev >> Others
dev >> Others >> Web
dev >> Ruby
dev >> Ruby >> Rails
dev >> SQL
dev >> XML
env >> Linux
env >> Linux >> Ubuntu
env >> Windows
env >> Windows >> Vista
etc
tool
tool >> Office
Accessory
Community
Private
CSS だけのレイアウトは難しい
header
menu
main
footer
こんなレイアウトにしたかったんです。
んで、main の部分だけ overflow: auto; な感じで。
でもどーしてもできないんですよね。下にはみ出たり、はみ出た部分がスクロールしなかったり。
仕方ないので、諦めて妥協しました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>footer test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="footer_test.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // <![CDATA[ function setBodySize() { var height = $("#container").height() - $("#header").height() - $("#footer").height(); $("#menu").height(height); $("#main").height(height); $("#main").width($("#container").width() - $("#menu").width()); } // ]]> </script> </head> <body onload="setBodySize();" onresize="setBodySize();"> <div id="container"> <div id="header">header</div> <div id="body"> <div id="menu">menu</div> <div id="main">main</div> </div> <div id="footer">footer</div> </div> </body> </html>
* { margin: 0; padding: 0; } html{ height:100%; } body{ height:100%; } div#container { height: 100%; } div#header { height: 40px; background-color: red; } div#menu { position:absolute; top:40px; left:0; width:200px; float: left; background-color: green; } div#main { position:absolute; top:40px; margin-left: 200px; background-color: blue; overflow: auto; } div#footer { background-color: yellow; position:absolute; bottom:0px; height:30px; width:100%; }
JavaScript 使うなんて妥協しすぎでしょうか・・・・
投稿日時 : 2008年8月2日 0:27
コメント
#
re: CSS だけのレイアウトは難しい
2008/08/02 1:06
とおりすがり
レイアウトの為にJavascript使うくらいなら、DTDをHTML 4.0系にでもして、tableでレイアウトする方が、まだユニバーサルデザイン的にはマシに思える気が……。
#
re: CSS だけのレイアウトは難しい
2008/08/02 7:30
THREE-ONE
う~ん、そうなんですよね。悩ましい。
一応コンテンツで JavaScript はごりごり使うので、レイアウトの為だけではないです。
JavaScript 使うなら、こんな固定的なレイアウトにする必要もないなぁ。とも思います。
#
re: CSS だけのレイアウトは難しい
2008/08/02 13:20
Hirotow
参考までにこんなのがあります。
http://css-eblog.com/csstechnique/post-12.html#frame
absoluteで上下に固定するというあんまりスマートじゃない方法ですが、他に方法は無いと思います。
#
re: CSS だけのレイアウトは難しい
2008/08/03 21:47
よこけん
はじめまして
こんなんでどうですか?
IE7 と FireFox3 で確認済みです。
<!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>
<title>さんぷる</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
html
{
overflow: hidden;
}
.Area
{
overflow: auto;
border: solid 1px Blue;
margin: 5px;
padding: 5px;
}
.Header
{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 80px;
}
.Navigation
{
position: absolute;
top: 100px;
left: 0px;
bottom: 100px;
width: 180px;
}
.Content
{
position: absolute;
top: 100px;
left: 200px;
right: 0px;
bottom: 100px;
}
.Footer
{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 80px;
}
</style>
</head>
<body>
<div class="Header Area">
<p>へっだー</p>
</div>
<div class="Navigation Area">
<p>なびげーしょん</p>
</div>
<div class="Content Area">
<p>こんてんつ</p>
</div>
<div class="Footer Area">
<p>ふったー</p>
</div>
</body>
</html>
#
re: CSS だけのレイアウトは難しい
2008/08/05 12:06
THREE-ONE
Hirotow さん、よこけんさん
ありがとうございます。
週末忙しくて確認できていなかったので、帰ってから試してみます。
#
NrYKmwxsYxXrJDo
2011/12/27 6:07
http://www.hansensurf.com
See it for the first time!!...
#
JvTdjbAhTGBO
2012/01/14 2:51
http://www.avidelectrical.com.au/
comment3
#
RCIPiDdCnTCAkRXB
2012/01/14 2:53
http://www.michelegreenmd.com/
comment3
Post Feedback
タイトル
タイトルを入力してください
名前
名前を入力してください
Url:
コメント:
コメントを入力してください
名前をブラウザに記憶する
Powered by:
Copyright © THREE-ONE