1

左側にサイドバー、右側にメイン コンテンツ エリアを持つ 2 列の HTML5 インターフェース (後方互換性は重要ではありません。すべてのユーザーが最新の Chrome/FF を使用します) を設計しています。

サイドバーに背景色と右側の境界線 (OS X Finder サイドバーのようなもの) を持たせたいと考えています。ページのコンテンツがページをそのサイズに拡張するのに十分でない場合でも、その背景と境界線をページの下部まで拡張したい. また、サイドバーを一定のピクセル数ではなくパーセンテージに設定したいと考えています。

通常、私は模造柱、またはこの場合は液体模造柱を使用します。ただし、列の右側に境界線を付けたいのですが、それが可能かどうか/どのように可能かわかりません。

理想的には、画像/偽の列をまったく使用せずに、これらすべてを実行できます。それを可能にする CSS3/HTML5 機能はありますか (前述のとおり、後方互換性は問題ではありません)。そうでない場合、サイドバーを固定サイズにする以外に、これに対する他の解決策はありますか?

4

3 に答える 3

0

これはあなたが探しているものを示していると思います。この例がどのように機能するかについて質問がある場合は、遠慮なく質問してください。:)

http://www.thechoppr.com/2009/02/09/2-column-fluid-layout-100-height-with-leftright-sidebar

于 2012-05-28T21:04:40.647 に答える
-1

うーん...あれ？

<style type="text/css">
  #left
  { height:100%;
    width:25%;
    min-width: 100px;
    float:left;
    background-color:red;
    border-right:solid 3px orange;
  }
</style>
<div id="left">menu</div>
<div id="right">contents</div>
于 2012-05-28T20:46:48.813 に答える
-1

いくつかのjQueryを使用できます：

var sidebar_height = 0;
var content_height = 0;

sidebar_height = $("#sidebar").height();
content_height = $("#content").height();
if(sidebar_height > content_height){
    $("#content").css("height", sidebar_height);
} else {
    $("#sidebar").css("height", content_height);
}
于 2012-05-28T21:16:19.943 に答える