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>

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:
コメント: コメントを入力してください
名前をブラウザに記憶する

ぽざうねっと

ニュース

書庫

日記カテゴリ

Accessory

Community

Private

コメント

Post Feedback