0

ヘッダー (利用可能なすべての幅と 130 ピクセルの高さを取る)、2 列 (1: 300 ピクセルの幅、可能な限り高さ、2: 列 2 がそれらの間の 300 ピクセルと 15-20 ピクセルのマージンを取った後のすべての利用可能な幅) でリキッド HTML レイアウトを作成しようとしています。 ）。

Atm 私はこれを持っています:

HTML:

<div class="wrapper">
   <div class="header">
      <!-- .... -->
   </div>
   <div class="content">
      <div class="left-column">
        <!-- ... -->
      </div>
      <div class="right-column">
        <!-- ... -->
      </div>
   </div>
</div>

CSS:


html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 1000px;
  min-height: 500px;
}

body {
  font: 12px sans-serif;
  background-color: #fff;
  color: #000;
}

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.header {
  padding: 0 30px;
  height: 100px;
  left: 0px;
  right: 0px;
  position: absolute;
  border: 1px solid black;
  border-top: none;
}

.content {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: 10px 20px;
  border: 1px solid black;
}

.left-column {
  float: left;
  width: 300px;
  border: 1px solid black;
}

.right-column {
  margin-left: 315px;
  border: 1px solid black;
}

問題は次のとおりです。より良い解決策はありますか?

ありがとう。

4

1 に答える 1

2

あなたの HTML を使って、このフィドルを作成しました: http://jsfiddle.net/RdQJY/1/。私はあなたの CSS を使用しませんでした - 私はあなたがそれを使用している方法で使用される配置が好きではないので、最初から書くことにしました (申し訳ありません)。lorem ipsum のテキストはプレースホルダーとして存在します。これを削除すると、div がウィンドウ全体を占有することがわかります。お役に立てれば！

PS: 列を同じ高さにする私の方法の唯一の欠点は、それらに下の境界線を適用する簡単な方法がないことです。

于 2011-09-02T00:44:44.620 に答える