0

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

<html style="min-height: 100%">
<head>...</head>
<body style="min-height: 100%">
  <div id="left" style="height: 100% !important">
    ...stuff...
  </div>
  <div id="header">
    ...stuff...
  </div>
  <div id="right" style="height: 100% !important">
    ...stuff...
  </div>
</body></html>

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

前もって感謝します！

4

1 に答える 1

1

まず、min-height:100% を使用することはお勧めしません。高さ：100％を使用してください。min-height は、主にピクセルまたは em 値に使用されることになっています。min-height で % を使用すると、目的が無効になります。最小の高さを画面のパーセンテージに等しくすることはできません。

1140 グリッド システムを使用します。使いやすく、非常に柔軟で、レイアウトを簡単かつ迅速に設計できます。

1140 グリッド システムを使用して、これを試してください。

<div class="container">   
    <div class="row">
        <div class="twelvecol">
            <p>Header area!!!!</p>
        </div>
    </div>
</div>
<div class="container">   
    <div class="row">
        <div class="sixcol">
            <p>left column</p>
        </div>
        <div class="sixcol last">
            <p>right column</p>
        </div>
    </div>
</div>

ほら、問題は解決しました。

于 2012-02-19T21:56:53.197 に答える