コンテンツで拡張するにはCSSサイドバーの高さが必要

StackOverflow https://stackoverflow.com/questions/1610710

  •  05-07-2019
  •  | 
  •  

質問

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

これを行う方法を知っている人はいますか

役に立ちましたか？

解決

これは、このタイプのレイアウトにDIVSを使用する場合の一般的な問題です。

「Faux column」をグーグルで検索すると、いくつかの回答が得られます。

eg。 http://www.alistapart.com/articles/fauxcolumns/

他のヒント

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

$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));

私はしばらくこの問題に悩まされており、この問題に関する記事を書きました：偽の列で完了。私が主張したことは次のとおりです。

  

このためのJavaScriptベースのソリューション   問題は他のどれよりも悪くありません   溶液。実際に使用している場合   JavaScript、数時間節約できます   物を手に入れようとする不満の   ワーキング。人々はあなたに対して警告します   これは、＆＃8220;と言うと   ユーザーはJavaScriptをオフにしましたか？＆＃8220;   ユーザーがオフになっている場合、私を信じて   JavaScript、ほとんどのウェブが壊れています   とにかく彼のために。あなたのサイドバーは   彼にとって重要です。

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

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

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

私のスタイルシートで、

.sidec
{
background-color:#123456;
}

私のHTMLページで、

<body class="sidec">

content....

</body>

最近、CSSプロパティ position：absolute および border を使用して、この問題に対する非常に創造的な解決策を見ました。

確実に機能するかどうかを確認する価値があります。

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

私は初心者なので、これが役立つかどうかはわかりません。ただし、サイズを2倍にしたときにサイドバーにコンテンツ全体を表示させるのに苦労したときは、次のことを行いました。クラスを変更するまで、応答なしで高さと幅を変更していました。私のクラスはSBフレームSB幅にリストされていました。したがって、SB高さSB幅を読み取るようにクラスを変更したとき、元のフレームサイズではなくコンテンツに適合しました。 SB max sb widthも試してみましたが、フッターメニューバーが表示されなくなりました（もう表示されなくなりました）。 SBの高さSBの幅に戻りましたが、すべて順調です。それはすべての人にとって超初級だと確信していますが、念のため、これを読んでいる初心者が私のようなhtmlコードについてあまり理解していない場合は... みなさん、ハッピーホリデー！ 抱擁、タラ

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

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

マークアップを複雑にする必要がないという考え方です。 「錯覚」のタッチでシンプルな構造画像を使用することは、ウェブデザインの一般的な方法です。

よろしく、 ヨナ

ここに新しいメンバーに対する態度が悪いので、この答えに困惑することを期待します。 私は、それぞれの幅（780pxおよび180px）の列に必要な2色で背景画像960px幅1px高を作成することでこの問題を回避しました。次に、これをコンテナの背景画像としてy軸で繰り返し使用し、コンテンツと右側のサイドバーの背景色を透明にしました。

 .container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto; 
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}

.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}

.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}

この方法には制限があると確信していますが、すべてのページで完全に機能します。

これをあまりうまく説明していない可能性があります。もしそうなら、喜んでください。私は自分の方法を拡張しようと努力します（おそらく既に一般的な知識です）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top