- 締切済み
範囲を固定してスクロール
<div id="s1"> <div id="s2"></div> <div id="s3"></div> </div> css #s1{ width:300px; height300px } #s2{ float:left; width50px; height:100px; } #s3{ float:left; width230px; height:300px; } この場合s2の部分を固定して s3をスクロールしたい場合 s2にdisplay:bolck;をするのがいいのか もしくはpositionをしたほうがいいのか あまり使わない技術なんですが s2を固定する方法を教えてください。
- yonbakukan
- お礼率7% (11/148)
- CSS
- 回答数1
- ありがとう数8
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
質問が分からない。それだと ┌───┐ │ │ │ │等幅フォントで見ること │ │ └───┘ ┌┐┌──┐ └┘│ │ │ │ └──┘ になるだけ。どうスクロールしたいのか??
関連するQ&A
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- div領域をウインドウサイズに合わせる
divタグで生成された3つの領域を横に並べたいのですが、 左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか? 高さもやはりウインドウサイズにあわせるようにしたいです。 また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。 現在下記で試していますが、うまくいきません。 お分かりになる方、知恵をお貸しくださいo(_ _*o) 【HTML側】 <div id="left">1</div> <div id="center">2</div> <div id="right">3</div> 【CSS側】 html,body{ height:100%; width:100%; } div#left{ width:150px; height:100%; float:left; } div#center{ width:160px; height:100%; float:left; } div#right{ width:100%; height:100%; float:left; }
- ベストアンサー
- HTML
- リキッドデザイン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%; } ----------------------------
- ベストアンサー
- CSS
- CSS:floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか? サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困
htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。 具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか? 【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }
- ベストアンサー
- その他(プログラミング・開発)
- スタイルシートでスクロールは可能ですか?
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- 2カラムサイト高さ100% 左右別々にスクロール
サイトの構成は2カラムのみのサイトで、左にナビ、右にコンテンツになります。 左右どちらもheight100%で、両方とも縦に別々のスクロールを行いたいと考えております。 そこで、main(左)とsub(右)を作りfixedで固定し、100%にしました。 その中に固定したエリアを導入しスクロールバーを表記させようと思い下記のような記述をいたしました。 main_sとsub_sのheightをpxで表記するとうまく動作します。 しかし、%にするとスクロールバーが表示されずfixedの影響で画面が固定されてしまいます。 #main{ float:left; width:400px; position: fixed; background-color:pink; height: auto; min-height: 100%; } #main_s { height:90%; overflow-y:scroll; } #sub{ float:left; width:300px; position: fixed; background-color:yellow; height: auto; min-height: 100%; margin-left:400px; } #sub_s { height:90%; overflow-y:scroll; } 左右のカラムを別々にスクロールをさせたいのですが、お力添えいただけたら幸いです。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 並んだ2つのfloatボックス、片方を固定位置にしたい
floatでボックスを2つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの2つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる(センタリングの為) ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- position:fixed;でメニューを右側に固定したい
position:fixed;でメニューを右側に固定したい こちらを参考にサイドバーが固定された2カラムのサイトを作っています。 http://www.css-lecture.com/log/css/049.html 上記のサイトを見てくだされば分かると思うのですが、サイトバーはすべてを囲うwrapperボックスの左端に固定されています。 これをwrapperボックスの右端に持って行きたいのですが、うまくいきません。 position:fixed;にrightやleftを指定すると、wrapperボックスではなくブラウザの端に寄ってしまいます。 absolutoではスクロールされてしまいますし……。 自分なりに調べていろいろと試してみたのですが、解決することはできませんでした。 javascriptや疑似フレームは出来るだけ使いたくありません。 右端に持って行くことは可能なのでしょうか?現状では無理なのでしょうか? HTML <div id="wrapper"> <div id="menu"></div> <div id="main"></div> </div> CSS #wrapper{ width:700px; margin:0 auto; background-color:#FFF; position:relative; } div#menu { width: 100px; background: #CCC; padding:10px; height:100%; position:fixed; top: 0px; z-index: 20; } * html div#subContents { position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #main{ margin-left:120px; padding:10px; width:560px; position:relative; background-color:#FFF; } よろしくお願いします。
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト