それで、弁護士である私の友人のためにウェブサイトを作っています。彼は、彼が気に入ったレイアウトの別のサイトへの参照を私に与え、「彼をそれに似たものにする」ことができるかどうか私に尋ねました. リファレンス サイトはおそらく 10 年前のもので、5 レベルの深さのネストされたテーブルで構成されているため、優れた Web 開発者のように CSS を使用することにしました。問題は、彼がヘッダー付きの 2 列のレイアウトを望んでいるのに、1 つの列がヘッダーと重なり、もう 1 つの列が重ならないということです。私は次のようにサイトをレイアウトしました。

すべてが相対位置とパーセンテージまたは自動の高さ/幅を使用します。ここでの主な問題は、予想どおり、#left と #right の両方の高さがページの 100% であることです。問題は、#right div がそのすぐ上にある #header div の下に押し下げられているため、ページの下部に #right div だけが占める余分なスペースがあることです。これを回避する方法はありますか？#header のスタイルをパーセンテージの高さに変更し、それを #right の高さから差し引くことを検討しましたが、それは私には厄介に思えます (その上、IE が壊れる可能性があります)。

前もって感謝します！

この画像のようなものを作成したいと思っています。

各ブロックには、画像（正方形の画像）とテキストがあります。

誰かがそれを設計する方法の手がかりを持っていますか？私はCSSソリューションを好みます。

ありがとう！

本文のダブル スクロール バーを取り除くために微調整している間に機能しなくなった 2 列のレイアウトがあります。今、私はラップにスクロールバーを1つ持っていますが、これは私が望んでいたものですが、コンテンツはスクロールバーの幅だけ重なっています。

2 つのコンテンツ ボックスは、コンテナに横に並べて収まりません。content1 のさまざまな縮小固定幅を試してみましたが、まったく違いはなく、何があっても列幅は同じままです。それは論理的ではないので、私は髪を引き裂いています！

このマークアップで：

次のようにスタイルを設定するにはどうすればよいですか。

各ペアの高さが同じになるように？高さは、コンテンツが長い記事から取得する必要があります。つまり、 CのコンテンツがDより長い場合、DはCの高さと一致する必要があります。

今まで試したのは古き良きフロートですが、フロートなので中身によって高さが変化します。

私も同様のことをグーグルで検索しましたが、私が見つけたのは、余分なコンテンツを隠すだけの固定高さの列です。

WYSIWYG エディターで使用される 2 列のレイアウトを構築したいと考えています。例: http://taurean.io/labs/clearcut-theme/essay.html

と呼ばれる外側のdiv要素とと呼ばれるcontainer2つの内側のdiv要素がfirstDivありますsecondDiv

firstDivは左に浮き、secondDivは右に浮きます。

外側のdiv要素にできるだけ多くの幅を持たせたいのですが、これは使用可能な幅の100％を意味します。

containerまた、2つの内側の要素に半分のスペース、つまりdivの50％を使用させたいと思います。

このための基本的なコードは次のとおりです。

質問1

ボディ要素を囲む単純な実線の境界線を期待していましたが、それはそうであるように見えましたが、ブラウザーのy次元にスクロールバーが表示されました。なぜこれが起こったのですか？体の幅と高さを100％欲しいと言ったのですが、それ以上のブラウザを使っているようです。

ここで、次のCSSコードを追加しました。

質問 2divは「コンテナ」divの50％を占めるようですが、高さは100％を超えているようです。なぜこれが起こったのですか？写真：

2番目のdivについても同じことを行い、次のCSSコードを使用してfloatプロパティを含めます。

質問 32つのdiv要素で2列のページを形成したかったのです。ただし、2番目のdiv要素は、前の要素のように意図したよりも高さが高くなります。また、ブラウザーのサイズを変更すると、2番目のdivが最初のdivの下に配置されます。

なぜこれが起こっているのですか、どうすれば回避できますか？

前もって感謝します

複数のボックス (div) をすべて float:left を使用して 2 列に配置します。div の高さが異なるため、レイアウトは次のようになります。

しかし、ボックスが左側の列に浮かんでいる必要がある場合は、最小の高さ (使用可能な最小スペース) を定義したいと考えています。次のような結果が必要です。

それは不可能だと思います...しかし、CSSのトリックがあるのでしょうか？

ありがとう、コンラッド

バックグラウンド

私はしばらくの間、960pxの幅と2つの列を持つレイアウトを探していました：

• メインコンテンツ：右揃え、幅550ピクセル、コンテナの右マージンから挿入。
• サイドバー：左揃え、幅250ピクセル、上、左、下の端がコンテナと同じ高さ。

私が苦労しているのは、サイドバーの背景が250pxの幅、親の100％の高さを占め、親の左端と同じ高さになるように背景を設定して、メインコンテンツを残して残りの幅と100％の高さを占めるようにすることです。親。

私はいくつかのテクニックを見てきましたが、それらは比較的柔軟性がないように見えました。たとえば、それはエレガントですが、FauxColumnsは適切ではないようですhttp://www.alistapart.com/articles/fauxcolumns/。

少し考えて、コンテンツのレンダリングと背景のレンダリングを分けてみることにしました。具体的には、メインコンテンツを右にフロートさせ、サイドバーを左にフロートさせclear:bothてから、コンテナーが2つの列の大きい方に調整されるようにします。

次に、まだコンテナ内にありますが、の後にclear:both、絶対に配置された2つの空のdivがあります。サイドバーの高さは100％、幅は250pxでleft:0、メインコンテンツの幅は100％です。また、サイドバーが前面になるようにz-indexを調整しました。

他にも必要なCSSがあります（たとえば、コンテナーラッパーは比較的配置されている必要があります）が、以下のソースでそれを参照してください。

質問

これは、Safariを搭載したMacで期待していたとおりに機能し、両方の背景が最も高い列に従って拡張され、ソースのマークアップが有効です。ただし、私の2つの主な懸念事項は次のとおりです。

1. これが他のブラウザ、特にIEでどのようにレンダリングされるかわかりません
2. 私はSEOを念頭に置いて設計しようとしましたが、私はまだ学んでいるのでSEOについてあまり手がかりがありません、これはSEOにどれほど優しいですか？

その他の情報源

フロートdivを親の100％の高さにするにはどうすればよいですか？

http://brentgrossman.com/348/not-so-fuax-columns/

（他にもあるかもしれませんが、申し訳ありませんが思い出せません！）

ソースコード

何が起こっているのかをよりよく説明するために、明るい色と調整されたdivを使用していることに注意してください。

読んでくれてありがとう、コメントを楽しみにしています！

このワードプレスのテーマでスクロールするときに、右のサイドバーの列を静的にするにはどうすればよいですか?

http://foxnet.fi/demot/live-wire/2012/02/25/two-columns-content-left/

みたいな機能が欲しい

http://thenextweb.com/microsoft/2013/02/15/messengers-skpe/?fromcat=all

ページが一番下までスクロールされるまで、右側のバーは常にページ上にある必要があります。