その他のHTML/CSS [分]高さの問題

私は弁護士の私の友人のためのウェブサイトを作っています。彼は自分が好きだったレイアウトの別のサイトへの参照を私に与えてくれました。参照サイトはおそらく10歳で、5レベルのネストしたテーブルを使っているので、良いWeb開発者のようにCSSを使うことに決めました。今問題は、ヘッダーを持つ2列のレイアウトが必要だが、ヘッダーとヘッダーが重複し、ヘッダーが1つしかないということです。その他のHTML/CSS [分]高さの問題

<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を破ります）。

ありがとうございます！

出典

2012-02-19 Actorclavilis

もう少しhtmlコードを教えてもらえますか？私はあなたの問題を理解したり、それを再現することはできません。 – andreapier

最初に、私はmin-height：100％を何でも使用することを推奨しません。ちょうど高さ：100％を使用してください。 min-heightは、主にピクセルまたはem値に使用されることになっています。 min-heightで％を使用すると目的が無効になり、画面のパーセンテージに等しい最小の高さを設定することはできません。

私は1140 grid systemを使用します。使いやすく、柔軟性があり、レイアウトを簡単かつ迅速に設計できます。問題解決、あなたが行くあり

<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>

：1140グリッドシステムを使用して

はこれを試してみてください。

出典

2012-02-19 21:56:53 AtHeartEngineer

これはクールです。私はコンテンツを行に分割する必要がない方法をもっと望んでいましたが、これはとても簡単に見えるので再構築のことを考えるかもしれません。 – Actorclavilis

うん！ 1140gでは、たくさんのテンプレートをすばやく作成できます。あなたはそれを楽しむことがうれしいです。ほとんどのウェブサイトを問題にならずに行に分けることができます。正直なところ、ヘッダーは1つの行として、残りのコンテンツは別の行として、フッター行として使用できます。そうすれば、実際に行を使うのではなく、よく整理されたサイトを扱う必要はありません。 – AtHeartEngineer

その他のHTML/CSS [分]高さの問題

答えて

関連する問題