2

2 列のレイアウトで、右側にグレーのサイドバーがあります。左の列の高さが増加したときにサイドバーの高さを拡張する必要があります (コンテンツが動的に拡張されるため)。サイドバーを静的ページに合わせることはできますが、ページの残りの部分に合わせてサイズを大きくすることはできません。いくつかのグーグルを行いましたが、私にとってうまくいく回避策を見つけることができませんでした。

誰もこれを行う方法を知っていますか?

4

8 に答える 8

10

これは少しずれているかもしれませんが、サイトで jQuery を使用している場合は、簡単な計算を実行して、同様のクラスを共有するすべての DIV を最大の高さにサイズ変更できます。

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
于 2009-10-23T00:23:39.880 に答える
10

これは、このタイプのレイアウトに DIVS を使用する場合によくある問題です。

「偽の列」をグーグルで検索すると、いくつかの答えが得られるはずです。

例えば。http://www.alistapart.com/articles/fauxcolumns/

于 2009-10-23T00:05:33.660 に答える
5

私はしばらくの間、この問題に悩まされていたので、この問題に関する記事を書きました。これが私が主張したことです：

この問題に対する JavaScript ベースのソリューションは、他のどのソリューションよりも悪くありません。実際、JavaScript を使用している場合は、動作させるための数時間のフラストレーションを軽減できます。人々は、「ユーザーが JavaScript をオフにするとどうなりますか?」と言って、これに対して警告します。ユーザーが JavaScript をオフにしている場合、Web の大部分はいずれにせよ壊れています。あなたのサイドバーは彼にとって重要ではありません。

cballou が述べたように、これを行う最も簡単な方法は、JQuery コードを使用することです。

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
于 2009-10-23T06:35:06.307 に答える
2

その特定のページで、をサイドバーと同じ色に変更しbackground-colorましたが、1つの全体的な背景ではなく、すべてのセクションの背景があります。しかし、それはすべての人にとってうまくいくとは限りません。

私のスタイルシートでは、

.sidec
{
background-color:#123456;
}

私のHTMLページでは、

<body class="sidec">

content....

</body>
于 2012-10-01T15:07:24.007 に答える
1

私は最近、CSS プロパティposition:absoluteとborder.

それがあなたのために働くかどうかを確認するためにチェックアウトする価値があります.

リンク: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

于 2009-10-23T06:24:02.180 に答える
1

私は初心者なので、これが役立つかどうかはわかりません。ただし、サイドバーのサイズを 2 倍にしたときにコンテンツ全体を表示するのに苦労したときは、次のようにしました。クラスを変更するまで、高さと幅を変更していましたが、応答がありませんでした。私のクラスはSBフレームSB幅に記載されていました。そのため、SB の高さ SB の幅を読み取るようにクラスを変更すると、元のフレーム サイズではなくコンテンツに適合しました。SB max sb width も試してみましたが、フッターメニューバーが表示されなくなりました（つまり、もう表示されません）。SB 高さ SB 幅に戻り、すべて順調です。これは皆さんにとって非常に初歩的なことだと思いますが、私のように HTML コードについてあまり理解していない初心者がこれを読んでいる場合に備えて... これがお役に立てば幸いです =) Happy Holidays 皆様! ハグ、タラ

于 2012-12-11T02:51:41.773 に答える
0

レイアウトに特定の効果を適用して、両方の列を一緒にサイズ変更する必要があると思います。列の高さの値を動的に変更したい場合は、スタイルを制御するための JavaScript を実装しない限り、css で簡単に機能するとは思えません。

ダルが提案したように、偽の列のリンクを見てください. 名前が示すように、解決策は列の高さを変更することではありません。代わりに、実際には同じ高さではないのに、両方の列が同じ高さであるように見えるという「錯覚」を与え、背景画像のタイルを使用しています。

マークアップを複雑にする必要はないという考えです。画像を使った「錯覚」を感じさせるシンプルな構成は、Web デザインの一般的な手法です。

よろしく、ヨナ

于 2009-10-23T06:02:43.923 に答える