2009-03-09 5 views
2

これらの要素にどのようなCSSを適用して、サイドバーを中間のdivの高さに拡大できるかを知っていますか?3列のCSSレイアウトで同じ高さに拡大する列を取得しますか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<title>This is my page</title> 
<style type="text/css"> 

body 
{ 
    background-color:#aaaaaa; 
} 

#container 
{ 
    width:900px; 
    margin-left:auto; 
    margin-right:auto; 
} 

#leftborder 
{ 
    float:left; 
    width:10px; 
    background-color:#ff0000; 
} 

#rightborder 
{ 
    margin:0; padding:0; 

    float:right; 
    width:10px; 
    background-color:#ff0000; 
} 

#middlecontainer{ 
    margin:0 10px; 
} 
</style> 

</head> 
<body> 

<div id="container"> 
<div id="leftborder"> 
a 
</div> 
<div id="rightborder"> 
a 
</div> 

<div id="middlecontainer"> 
This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content 
</div> 

</div> 


</body> 
</html> 

答えて

3

ページの幅が固定されている場合は、Faux Columnsの技術を適用できます。

短いバージョン:「wrapper-div」内の背景イメージとして画像を繰り返して、ページ全体が伸びているように見せます。たとえ内部のcontent-divsが数行しかない場合でも同じです。

+0

それでも、特に幅の広いサイトでは、きれいではありません。 – Sam152

+0

divを境界線として使用するよりも、少なくとも*遠方の方が良い方法です。しかし、問題を見ることはできません。一般的に配備されている技法であり、魅力的に機能し、適切に使用することを学ぶときに滑らかなグラフィックベースのレイアウトを可能にします。 –

1

A list apartで例を見て、これが視覚的にどのように達成されるかを見てください。 もう1つのオプションは、テーブルを使用することです。

+1

私は人々が何の理由もなくdownvoteするとき、人々がコメントを提供することを望む - またはその逆の周り... – Goran

+0

無関係:テーブルは取り除こうとしているものです。彼らはオプションではありません。 – Sam152

+1

私は、CSSのトピックでは、単語表は常に下線につながることを経験しました。関連するかどうか。 –

0

背景画像や中央のdivの単純な境界線(幅の広い境界線を使用し、その上にフロートを表示)は最も簡単な解決策です。

サイドバーを絶対に中央のdivに配置し、実際に長くしてオーバーフロー:hiddenをセンターdivに適用することもできます。私はそれを試していないが、それはうまくいくはずだ。