お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。
テーブルを使い左右にレイアウトを分けています。
左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。
メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか?
恐れ入りますが下記ソースです。
/*CSS*/
body {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
text-align:center;
position:relative;
}
#header {
padding:0px ;
margin: 0px auto;
width: 760px;
height: auto;
}
#contents {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
background-color:#FFFFFF
}
.side{/*メニュー部分*/
margin:0px;
padding:0px 0px 20px;
border:1px #666666 solid ;
width:163px;
height:auto;
}
.footer {/*フッターの背景画像サイズに合わせheightを設定*/
margin:0px;
padding:10px;
width: 760px;
height:72px;
text-align:left;
background-image:url(image/bottom.gif);
background-repeat:no-repeat;
border:0px;
}
.coretable{/*画面レイアウト左右分けテーブル*/
margin:5px 0px 0px;
padding:0px;
width:760px;
}
<!--html-->
<body>
<div id="header">
ヘッダー内容
</div>
<div id="contents">
<table border="0" cellpadding="0" cellspacing="0" class="coretable">
<tr><td width="165" align="center" valign="top">
<div class="side">
メニュー内容
</div>
</td>
<td width="595" align="center" valign="top">
メインコンテンツ内容
</td>
</tr>
</table>
</div>
<div id="footer">
フッター内容
</div>
</body>
</html>
あるサイトで拝見して、
.sideに
height:100%;/* for IE6 */
min-height:100%;
を加え、
html{ height:100%; }
body{ height:100%;}
としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。
テーブルを使っているのが悪いのでしょうか?
どうかお知恵をお貸し下さい。
No.1ベストアンサー
- 回答日時:
なにが悪いって、テーブルを使ってるのにtdの中に無意味なdivを
書いてるのが一番悪い。
<td class="side" width="165" align="center" valign="top">
メニュー内容
</td>
これだけ。
grumpy_the_dwarf様
お世話になります。
なんと素早く簡潔なご回答をありがとうございます。
こんなに簡単なことだったなんて…。お恥ずかしい限りでございます。
大変勉強になりました。
本当にありがとうございます。
長文でしたのに読んで下さりありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSS、width100%でもできる余白
-
ライトボックスでスクロールバー
-
safariだけ、cssが効きません!
-
コンボボックスの幅
-
z-indexで上になっている要素だ...
-
CSS/HTML で画像 2枚重ねた上に...
-
スタイルシート a:activeで画像...
-
htmlのボタンのサイズについて
-
吹き出し 下記の吹き出しのスタ...
-
FireFoxで見るとdiv間に隙間が...
-
Media Queries 4 で 非推奨とな...
-
divの中にspanを右寄せにするに...
-
テキストボックスの高さを可変...
-
入力フォームとセレクトボック...
-
form input テキストを上下中央...
-
1枚画像でリンクposition指定。...
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報