3

私はこれにとても迷っています。数え切れないほどの検索と試行の時間で、私は実用的な解決策を得ていません。

次の3つのポイントすべてを同時に達成するのに問題があります。

  1. 下部にいくつかのパディングを取得します。（コンテンツが長くなると、最終的には下部に空きスペースがなくなります。）
  2. 左側と右側の両方を取得して、最長のコンテンツと一緒に拡張します
  3. 脇がメインコンテンツより短い場合でも、区切り線は上から下にある必要があります。

いくつかのメモ：

  • 現在、3番目のポイントが機能しています。

  • 脇の位置を相対位置に変更すると、ページが適切に拡張されます。3番目のポイントはもう機能しませんが。

  • 最初の解決策はまだ見つかりませんでした。

これが私のレイアウトの縮小版です。この少量のコードにはまだすべての問題が存在するため、おそらくこれで十分です。

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <nav>
                    <!--My nav here-->
                </nav>
            </header>
            <div id="content_wrapper">
                <aside>
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                    </p>
                </aside>
                <div id="content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                    </p>
                </div>
            </div>
        </div>
    </body>
    </html>

style.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #ebebeb;
}

#wrapper {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

#content_wrapper {
  position: absolute;
  width: 1000px;
  top: 90px;
  background-color: #fff;
}

#content_wrapper aside {
  position: relative;
  float: left;
  width: 200px;
  padding: 10px;
  top: 0px;
  bottom: 0px;
  box-shadow: inset -8px 0 10px -6px #ddd;
}

#content {
  float: right;
  width: 760px;
  padding: 10px;
}

これは最初から作り直す必要があると確信しています。

しかし、それを成功させる前に、問題の原因を理解したいと思います。これはおそらく簡単に解決できるでしょうか。

または、言い換えると、すべてが正しく拡張され、下部にパディングが残っているように、このレイアウトを実現するための最良の/機能する方法は何ですか？

どんな助けでも大歓迎です。

4

2 に答える 2

8

これは実際には私の問題と非常に似ていましたが、私は気づいていませんでした。

ここに画像の説明を入力してください

列の内容を背景色から分離する

等高さの問題を解決するための最初のステップは、個別に解決できる小さな断片に分割することです。これを行う方法は、各列に1つではなく2つのdivを使用することです。最初のdivはコンテンツを保持するために使用され、他のdivは背景色として使用されます。この分離により、これらの要素を個別に制御できるほか、より便利な方法で要素をまとめることができます。これはまもなく明らかになります。

フロートコンテナdivは、常にフロートコンテンツの高さになります

これが、この等カラム高さ法の背後にある中心的な原理です。divの高さを最も高い列と等しくする唯一の方法は、そのdivにすべての列が含まれている場合です。つまり、これを別の方法で説明すると、列をコンテナー内に配置することで、コンテナーを最も高い列の高さにします。これは非常に便利な構造です。

コンテナ部門の説明

3列のHTMLdiv構造

上記の例では、3つのコンテンツ列がコンテナdiv内にあります。

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

3列のCSS

そして、これがコンテナdivを最長の列の高さに強制するCSSです。

#container1 {
  float:left;
  width:100%;
}
#col1 {
  float:left;
  width:30%;
  background:red;
}
#col2 {
  float:left;
  width:40%;
  background:yellow;
}
#col3 {
  float:left;
  width:30%;
  background:green;
}

この構造がすべてのブラウザーで正しく機能するためには、コンテナーdivがフロート（左または右）されている必要があり、さらに各列コンテンツdivもフロートされている必要があります。どちらの方向でもかまいません。コンテンツdivをフロートさせるプロセスにより、コンテンツdivはページ全体に水平に整列します。コンテナを浮かせると、内部の最も高い柱の高さまで伸びます。コンテナをフロートさせないと、コンテンツdivがコンテナの下部から突き出て、コンテナの高さが正しくなりません。実際、この例では、コンテナがフロートされていない場合、コンテナの高さはゼロになります。

ネストされたコンテナを追加する

等しい高さの列への次のステップは、コンテナを追加して、それらが互いにネストされるようにすることです。列と同じ数のコンテナ（3つ）が必要です。これらの3つのコンテナは、各列の背景になります。元の列から背景色を削除し、それらをコンテナに追加したことに注意してください。

初期レイアウト

3列のHTMLdiv構造

以下のHTMLに2つの追加コンテナが追加されました。

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

3列のCSS

すべての要素は左にフロートされ、コンテナの幅は100％に設定されているため、ページの全幅を維持します。背景色がコンテンツdivから削除され、コンテナに追加されました。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}

相対的な位置でコンテナを所定の位置に移動する

相対配置を使用して、コンテナを新しい場所に移動します。各コンテナを移動すると、divが下に表示されます。同じ高さの列の背景を作成するのは、色付きのコンテナの階層化と位置です。container2 divを左に30％移動すると、緑色の右側の列が表示され、container1 divを左に40％移動すると、黄色の中央の列が表示されます。同時に、まだ表示されている赤いセクションが左側の列。

カラムの色

CSSの相対的なポジショニングルール

これは、相対位置の追加を示す追加されたCSS行です。

#container2 {
    position:relative;
    right:30%;
}
#container1 {
    position:relative;
    right:40%;
}

コンテンツを各列に戻す

次に行うことは、各列のコンテンツをページに戻し、下の列の背景色と一致するようにすることです。繰り返しますが、これは単純な相対測位で行われます。

コンテンツ

そして最後に、overflow：hidden;を追加して、張り出したコンテナを切り取ります。最も外側のコンテナのルール-container3。

ここに画像の説明を入力してください

これは、コードを統合する初期レイアウトです。JFiddleの例

このJFiddleの例で解決されていないものの1つは、セパレーターです。現在、私はセパレータを脇ではなくドロップシャドウとしてコンテンツに追加することを考えていました。これは、別のdivよりも簡単に作成できます。

出典：同じ高さの列がブラウザを横切るcssハックなし

于 2013-02-26T17:35:05.250 に答える
0

あなたはこのようにそれをやってみることができます：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
            * {
              margin: 0;
              padding: 0;
            }

            body {
              background-color: #ebebeb;
            }

            #wrapper {
              width: 1000px;
              margin-left: auto;
              margin-right: auto;
            }

            #content_wrapper {
              width: 1000px;
              margin: 90px auto 90px;
              background-color: #fff;
            }

            #content_wrapper aside {
              display: table-cell;
              width: 200px;
              padding: 10px;
              box-shadow: inset -8px 0 10px -6px #ddd;
            }

            #content {
              display: table-cell;
              width: 760px;
              padding: 10px;
            }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>
            <nav>
                <!--My nav here-->
            </nav>
        </header>
        <div id="content_wrapper">
            <aside>
                <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                </p>
            </aside>
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
                </p>
            </div><!-- #content -->

            </div>
        </div>
    </div>
</body>
</html>

絶対位置を#content_wrapper削除し、下部に常にある程度のスペースがあるようにマージンを追加しました。それに加えてaside、#contentテーブルセルのように表示されています-これは一部の古いブラウザ（つまりIEの古いバージョン）では機能しない可能性があるため、サポートするブラウザによっては適切でない場合があります。

于 2013-02-26T17:01:04.500 に答える