電子書籍の厳選無料作品が豊富！

リキッドデザイン3カラム左端幅固定の個別スクロール

解決済

  • 質問者：cofcof
  • 質問日時：
  • 回答数：3件

現在、リキッドデザインで幅3カラムのレイアウトをしようとしています。
左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。
以下のコーディングでFirefoxとChrome、Safariでは想定したレイアウトを概ね実現できたのですが（厳密には中央と右のサイズが微妙に異なっていて調整できていません）、IE9以下は全てレイアウトが崩れて表示されてしまいます。
IE6はともかくとしても、IE7以降で崩れずにレイアウトを完成させる方法は無いでしょうか。

さらに欲を言えば中央と右カラムを完全に二分割のサイズにできるとありがたいです。
（こちらはできればで結構ですが。。。）

おわかりいただける方、お知恵をお借りできないでしょうか。
ご迷惑をおかけしますが、よろしくお願いいたします。
------------html------------
<div id="wrap">
<div id="contents">

<div id="wall">

<div id="nav">
左ブロック
</div>

<div id="main">
中央ブロック
</div>

</div>

<div id="sub">
右ブロッック
</div>

</div>
</div>
----------------------------
------------css------------
#wrap{
width:100%;
text-align:left;
min-height: 100%;
font-size: 100%;

}

#contents{
position:fixed;
overflow:auto;
width:100%;
min-width:980px;
height:100%;
margin-top:60px;
}

#wall{
position:fixed;
overflow:auto;
width:60%;
min-width:579px;
height:100%;
}

#nav{
position:fixed;
overflow:auto;
left:0px;
width:178px;
height:100%;
}

#main{
width:100%;
min-width:401px;
height:100%;
margin-left:178px;

}

#sub{
width:40%;
min-width:401px;
height:100%;
margin-left:60%;
}
----------------------------

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

左側もスクロールさせるのなら、ずっと簡単に



<!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">
<!--
html,body{background-color:gray;
＿margin:0;padding:0;
}
div.article{background-color:green;
＿height:400px;margin:0;paddig:0;
＿position:relative;
＿padding-left:178px;
}
div.main{background-color:yellow;
＿height:100%;margin:0;
＿position:relative;
}
div.contentTable,div.section,div.aside{overflow:auto;}
div.contentTable,div.aside{
＿position:absolute;top:0;
＿height:100%;margin:0;
}
div.contentTable{background-color:white;
＿width:178px;
＿left:0;
}
div.aside{background-color:fuchsia;
＿width:50%;right:0;}
div.section{background-color:lime;
＿width:50%;height:100%;
}
div.section div.section{width:100%;height:auto;}
-->
＿</style>
</head>
<body>
＿<div class="header" id="Top">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="article">
＿＿<div class="contentTable">
＿＿＿<ol>
＿＿＿＿<li><a href="#Top">トップ</a></li>
＿＿＿＿<li><a href="#section1">一章</a></li>
＿＿＿＿<li><a href="#section2">ニ章</a></li>
＿＿＿＿<li><a href="#section3">三章</a></li>
＿＿＿＿<li><a href="#section4">四章</a></li>
＿＿＿＿<li><a href="#aside1">補足</a></li>
・・・【中略】・・・
＿＿＿</ol>
＿＿</div>
＿＿<div class="main">
＿＿＿<div class="section">
＿＿＿＿<div class="section" id="section1">
＿＿＿＿＿<h2>記事(1)</h2>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿</div>
＿＿＿＿<div class="section" id="section2">
＿＿＿＿＿<h2>記事(2)</h2>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿</div>
＿＿＿＿<div class="section" id="section3">
＿＿＿＿＿<h2>記事(3)</h2>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿</div>
＿＿＿＿<div class="section" id="section4">
＿＿＿＿＿<h2>記事(4)</h2>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿</div>
＿＿＿</div>
＿＿＿<div class="aside" id="aside1">
＿＿＿＿<h2>補足記事</h2>
＿＿＿＿<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>
＿＿</div>
＿</div>
＿<div class="footer" id="documentInfo">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
やりたいことがほぼ実現できたと思います！！
教えていただいたものを元に、ちゃんと動くか組み込んでみます。
どうもありがとうございました！

通報する
お礼日時：2011/12/14 00:46

No.2

  • 回答者： ORUKA1951
  • 回答日時：

HTMLとCSSはややこしいので見てません。

なぜかはサンプルコードを見ればわかるでしょう。
「左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。」
だけから
★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェック済み。HTML4.01strict+CSS2
タブは＿に置換してあるので戻すこと。

<!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">
<!--
html,body{
＿margin:0;padding:0;
＿background-color:gray;/* for test */
}
div{border:solid 0.1px gray;}
div.section{
＿height:400px;margin-left:178px;
＿position:relative;
＿background-color:green;/* for test */
}
div.section div.section{
＿height:100%;width:50%;margin:0;
＿overflow:auto;
＿position:absolute;/* for IE7 */
＿top:0;
＿background-color:yellow;/* for test */
}
div.section div.section div.section{
＿position:static;/* for IE7 */
＿width:100%;
＿height:auto;
＿overflow:visible;
＿background-color:lime;/* for test */
}
div.section div.contentTable{
＿position:fixed;
＿width:178px;height:400px;
＿left:0;
＿background-color:white;/* for test */
}
div.section div.aside{
＿position:absolute;
＿width:50%;margin:0;height:100%;
＿overflow:auto;right:0;top:0;
＿background-color:fuchsia;/* for test*/
}
-->
＿</style>
</head>
<body>
＿<div class="header" id="Top">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<div class="contentTable">
＿＿＿<ol>
＿＿＿＿<li><a href="#Top">トップ</a></li>
＿＿＿＿<li><a href="#section1">一章</a></li>
＿＿＿＿<li><a href="#section2">ニ章</a></li>
＿＿＿＿<li><a href="#section3">三章</a></li>
＿＿＿＿<li><a href="#section4">四章</a></li>
＿＿＿＿<li><a href="#aside1">補足</a></li>
＿＿＿＿<li><a href="#documentInfo">文書情報</a></li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="section">
＿＿＿<div class="section" id="section1">
＿＿＿＿<h2>記事(1)</h2>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿</div>
＿＿＿<div class="section" id="section2">
＿＿＿＿<h2>記事(2)</h2>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿</div>
＿＿＿<div class="section" id="section3">
＿＿＿＿<h2>記事(3)</h2>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿</div>
＿＿＿<div class="section" id="section4">
＿＿＿＿<h2>記事(4)</h2>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿＿<p>ここに本文が入る</p>
＿＿＿</div>
＿＿</div>
＿＿<div class="aside" id="aside1">
＿＿＿<h2>補足記事</h2>
＿＿＿<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>
＿</div>
＿<div class="footer" id="documentInfo">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！
いただいたサンプルを見てみたのですが、左カラムはスクロールしないようでしたので、
もう少しいじれないか試してみます。

やはりposition:fixedを多用すべきでは無いですかね。。。
かなり試行錯誤をして、ご回答のような使わないパターンも考えてみていたのですが、
どうにもうまくいっておらず。。。。

ともかくありがとうございました！

通報する
お礼日時：2011/12/12 12:05

No.1

  • 回答者： Questa
  • 回答日時：

多重 DIV構造になってしまいましたが、とりあえず作ってみました。


IE9の表示は未確認です。

(HTML)
<div class="contents">
<div class="nav">左ブロック</div>
<div class="main-sub-w">
<div class="main-sub-in-w">
<div class="main">中央ブロック</div>
<div class="sub-w">
<div class="sub">右ブロッック</div>
</div>
</div>
</div>
</div>

(CSS)
.contents {
height: 300px; /* 適当 */
min-width: 980px; /* 178 + 401 + 401 */
}
.nav {
float: left;
margin-right: -178px;
overflow: auto;
width: 178px;
height: 100%;
background: #fcc;
}
.main-sub-w {
float: left;
width: 100%;
height: 100%;
}
.main-sub-in-w {
margin-left: 178px;
width: auto;
height: 100%;
}
.main {
float: left;
margin-right: -50%;
overflow: auto;
width: 50%;
height: 100%;
background: #cfc;
}
.sub-w {
float: left;
width: 100%;
height: 100%;
}
.sub {
margin-left: 50%;
overflow: auto;
height: 100%;
background: #ccf;
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
内容を確認してみたのですが、左カラムと中央カラムのスクロールバーが表示されてはいるのですが、
どうもうまくスクロールしないようです。
もう少し考えてみますね。

通報する
お礼日時：2011/12/14 00:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報