0

背景が緑色で、左の列の全長をフッターのすぐ上まで下がるはずです。それぞれのdivを100％の高さに設定していますが、足りません。

html, body { height: 100%; }

div#page-wrap {
  width:960px;
  height:100%;
  margin:0 auto;
  padding-bottom:10px;
}

div#body-wrapper {
   height:100%;
   position:relative;
}

nav#side-navigation {
   height:100%;
   width:185px;
   background-color:#C2F4C2;
   float:left;
}

div#content-wrap {
   width:775px;
   height:100%;
   float:right;
   position:relative;
   background:transparent url(../images/global/column_corner.gif) no-repeat top left;
}

サイトコードは次のとおりです：http：//freshbaby.com/v20/about_us/index.cfm

4

2 に答える 2

1

トリックを行ったこの記事を見つけました：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-06-07T16:28:53.890 に答える
1

「偽の列」を使用できます。この場合、バックグラウンドは、列のコンテナー要素で垂直にタイル張りされた背景画像です。( div#page-wrap) 列の幅が固定されている限り、うまく機能します :)

詳細については、この記事をお読みください。

于 2012-05-20T14:16:47.367 に答える