html - CSSを使用してHTMLでdivの高さを設定する

Question

2列のテーブルのようなページをレイアウトしようとしています。右端の列をページの右側にドッキングする必要があります。この列の背景色は明確である必要があります。右側のコンテンツは、ほとんどの場合、左側のコンテンツよりも小さくなります。右側のdivは、その下の行のセパレーターに到達するのに十分な高さである必要があります。背景色をそのスペースに塗りつぶすにはどうすればよいですか？

.rightfloat {
  color: red;
  background-color: #BBBBBB;
  float: right;
  width: 200px;
}

.left {
  font-size: 20pt;
}

.separator {
  clear: both;
  width: 100%;
  border-top: 1px solid black;
}

<div class="separator">
  <div class="rightfloat">
    Some really short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>
<div class="separator">
  <div class="rightfloat">
    Some more short content.
  </div>
  <div class="left"> 
    Some really really really really really really
    really really really really big content
  </div>
</div>

編集：この例は非常にテーブルに似ており、実際のテーブルが適切な選択であることに同意します。しかし、私の「実際の」ページは最終的にはテーブルのようになりません。最初にこのタスクをマスターしたいと思います。

また、何らかの理由で、IE7で投稿を作成/編集すると、コードはプレビュービューに正しく表示されますが、実際にメッセージを投稿すると、書式が削除されます。Firefox 2で私の投稿を編集することはうまくいったようです、FWIW。

別の編集：ええ、私はGateKillerの答えを受け入れませんでした。それは確かに私の単純なページではうまく機能しますが、私の実際の重いページではうまく機能しません。私はあなたが私に指摘したリンクのいくつかを調査します。

score 22 · Accepted Answer

ええと...

あなたの質問に対する簡単な答えは、body と html タグに 100% の高さを設定し、ページの高さを 100% にしたい各 div 要素で高さを 100% に設定する必要があるということです。

実際、100% の高さはほとんどの設計状況では機能しません。これは短いかもしれませんが、良い答えではありません。Google の「任意の列で最も長い」レイアウト。最良の方法は、左右の列をラッパー内に配置し、div左右の列をフロートしてからラッパーをフロートすることです-これにより、内側のコンテナーの高さまで引き伸ばされます-次に、外側のラッパーに背景画像を設定します. ただし、IE の「ダブルマージンフロートバグ」が発生した場合に備えて、フローティング要素の水平マージンに注意してください。

score 9 · Accepted Answer

これを試してみてください：

html, body,
#left, #right {
  height: 100%
}

#left {
  float: left;
  width: 25%;
}
#right {
  width: 75%;
}

<html>
  <body>
    <div id="left">
      Content
    </div>
    <div id="right">
      Content
    </div>
  </body>
</html>

score 5 · Accepted Answer

私は厳密に CSS をあきらめ、少し jquery を使用しました。

var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();

if (leftcol_height > rightcol_height)
    rightcol.height(leftcol_height);
else
    leftcol.height(rightcol_height);

score 3 · Accepted Answer

これは、同じ高さの列の例です-同じ高さの列-再考

「フェイクコラム」のアイデアもチェックできます-フェイクコラム

テーブルルートに行かないでください。表形式のデータでない場合は、そのように扱わないでください。アクセシビリティと柔軟性にとっては悪いことです。

score 2 · Accepted Answer

私のサイトでも同じ問題がありました（恥知らずなプラグ）。

ナビゲーションセクション「float：right」があり、ページの本体には、右に配置された「repeat-y」で横に約250pxの背景画像があります。次に、「clear：both」を含むものを追加しました。これがW3SchoolsとCSSのclearプロパティです。

「ページ」クラスのdivの下部にクリアを配置しました。私のページソースは次のようになります。

body
 -> header (big blue banner)
 -> headerNav (green bar at the top)
 -> breadcrumbs (invisible at the moment)
 -> page
     -> navigation (floats to the right)
     -> content (main content)
         -> clear (the quote at the bottom)
         -> footerNav (the green bar at the bottom)
     -> clear (empty but still does something)
 -> footer (blue thing at the bottom)

私はそれが役立つことを願っています:)

score 0 · Accepted Answer

あなたの質問に対する簡単な答えは、bodyとhtmlタグに100％の高さを設定してから、ページの高さを100％にする各div要素の高さを100％に設定する必要があるということです。

score 0 · Accepted Answer

コードが読みやすくなるように、ここで手助けしようとしています。
上部の「101010」のボタンをクリックすると、コードスニペットを挿入できます。コードを入力して強調表示し、ボタンをクリックするだけです。

以下に例を示します。

<html>
    <body>
    <style type="text/css">
        .rightfloat {
            color: red;
            background-color: #BBBBBB;
            float: right;
            width: 200px;
        }

        .left {
            font-size: 20pt;
        }

        .separator {
            clear: both;
            width: 100%;
            border-top: 1px solid black;
        }
    </style>

score 0 · Accepted Answer

2 列のレイアウトは、CSS で機能させるのが少し難しいです (少なくとも CSS3 が実用化されるまでは)。

左右のフローティングはポイントまで機能しますが、背景を拡張することはできません。背景を無地に保つには、「フェイクカラム」と呼ばれる手法を実装する必要があります。これは基本的に、カラム自体に背景画像がないことを意味します。2 つの列は親タグ内に含まれます。この親タグには、必要な 2 つの列の色を含む背景画像が与えられます。この背景を必要なだけ大きくして (単色の場合は、高さを 1 ピクセルにします)、y を繰り返します。AListApart には、それを機能させるために何が必要かについての優れたウォークスルーがあります。

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

score 0 · Accepted Answer

2つのオプションを考えることができます

ページの読み込み時に小さい列のサイズを変更するには、javascript を使用します。
代わりbackground-colorにコンテナーの列に( ) を設定して、同じ高さを偽装します。<div/><div class="separator"/>repeat-y

score 0 · Accepted Answer

そのためには css プロパティwidthを使用するだけで十分です。

次に例を示します。

<style type="text/css">;
    td {
        width:25%;
        height:100%;
        float:left;
    }
</style>

score 0 · Accepted Answer

これでうまくいくはずです: CSS でhtmlandbody要素の高さを 100% に設定します。その後、必要に応じて高さを調整できますdiv。

html {
    height: 100%;
}

body {
    height: 100%;
}
div {
    height: 100%; /* Set Div Height */
}

html - CSSを使用してHTMLでdivの高さを設定する

14 に答える 14

Related

Reference