0

テーブルのデザインを CSS の div デザインに変換しようとしています。

機能しないもの:

1.) 黒い div にはリスト項目があるため、現在表示されているスクロールバーが必要です。それはいいです。しかし、高さを 400px に制限したくありません。以前のデザインでは高さが 100% だったので、画面の縦方向のスペースをすべて占有していました。

2.) 赤い div (rightContent) の幅は 200px に固定する必要があります。これを設定するとき、何を設定する必要がありますか? leftContent がすべての水平方向のスペースを取るようにします。

とりわけ、古いテーブル レイアウトでは、レイアウト全体に表示される外側の垂直スクロール バーがありませんでした。

これをIE9でテストしました

http://jsfiddle.net/pEMwP/4/

4

2 に答える 2

0

質問 1 の場合: スクロールバーが必要な場合は、height プロパティを auto に設定しないでください。代わりに、このように Javascript を介して Div の高さを動的に設定できます。

document.getElementById("ListData").style.height=<your Size>;

質問 2 の 場合:高さを Red Div に設定したい場合。このように指定できます。

height: 200px;
overflow:hidden;

これにより、div が 200px に制限されます。これで、他の div/div の幅を広げてこのスペースを占有できます。

于 2012-06-11T14:43:17.413 に答える
0

このようなものをゼロから始める場合は、レイアウトを再考するので、それほど厳しい制約はありませんでしたが、既存のサイトを変換しているので、これはオプションではないことを理解しています.

display: table;、display: table-row;およびdisplay: table-cell;を使用できます。意味的に正しい (それは表形式のデータではありませんよね?) 構造を取得するための宣言です<table>。確かに、IE6 と 7 (おそらくユーザーの 2 ～ 3%) にはいくつかの回避策を実装する必要がありますが、これらのブラウザーでは使用できるが不完全であることを受け入れることができるでしょうか?

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

于 2012-06-14T00:49:03.650 に答える