1

これに対する解決策を見つけようとしましたが、実際には何も思いつきません。これが私がやりたいことの基本です。

レイアウトを3divにしたいのですが、セクション1はヘッダー（ロゴ）、セクション2は水平メニュー、セクション3はメニューの選択に基づいて変化するメニュー固有のコンテンツです。ブラウザのスクロールバーがなく、セクション1と2が常に表示され、セクション3がブラウザウィンドウの下部まで拡張され、常にscollbarが表示されるようにしたいと思います。コードを最後に配置しますが、FFでは正常に機能しますが、IE8では機能しません。同じdivでtopとbottomを使用できないことを読みましたが、なぜですか？FFで意図したとおりに正常に動作します。上を設定して高さを100％にしてみましたが、上を163に設定しているので、下をウィンドウの下163ピクセルに配置します。ウィンドウが垂直方向に拡大または縮小するにつれて、セクション3を拡大および縮小したいと思います。これが私の非常に単純化されたコードです。私' インラインスタイルを使用して、複数のファイルでの作業を最小限に抑え、テストを容易にしました。index.cssは、このコンテキストでは重要ではありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Test Junk</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>

  <body>
<div style="background-color:#cccea2; text-align:center;height:136">
    section 1
</div>
<div style="background-color:#ccace2; text-align:center;height:27">
    section 2
</div>
<div style="background-color:#225522;     text-align:center;position:absolute;top:163;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden;">
section 3    
</div>
</body>
</html>

更新：私はxhtml doctypeを使用してある程度の成功を収めており、優れたソリューションに取り組んでいます。しかし、解決策を探し続けているときに、別の例でこれを見つけました。同じdivでTOPとBOTTOMを使用すべきではない理由はまだわかりません。これらは2つの非常に異なるものです。

4

4 に答える 4

0

上と下の使用は不適切です。FFで動作するからといって、正しくはなりません。やってみました：

padding-bottom: 1000em;
margin-bottom: -1000em;
于 2012-04-09T17:49:45.890 に答える
0

別のDoctypeを使用したサンプルソリューションがあります。同じdivでTOPとBOTTOMを使用すべきではないと人々が言っ​​ている理由はまだわかりません。私にとって、それは同じdivでmargin-topとmargin-bottomを使用しないと言っているのと同じです。理解できません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>Test Junk</title>
  </head>
<style>
body {
    background-color:#99cc99;
    margin:0;
    padding:0;
    font-family: Arial, Tahoma, Times;
    font: Times;
    font-size: 10pt;
    overflow:hidden;
    width:100%;
    height:100%;
}
</style>
  <body>
<div style="background-color:#cccea2;width:100%;text-align:center;height:136px;">
    section 1
</div>
<div style="background-color:#ccace2; position:absolute;top:136px;width:100%;text-align:center;height:27px;">
    section 2
</div>
<div style="background-color:#225522; text-align:center;position:absolute;top:163px;bottom:0px;width:100%;overflow-y:scroll;overflow-x:hidden;">
section 3a <br>   
section 3b <br>   
section 3c <br>   
section 3d <br>   
section 3e <br>   
section 3f <br>   
section 3g <br>   
section 3h <br>   
section 3i <br>   
section 3j <br>   
section 3k <br>   
section 3l <br>   
section 3m <br>   
section 3n <br>   
section 3o <br>   
section 3p <br>   
section 3q <br>   
section 3r <br>  
section 3s <br>   
section 3t <br>   
section 3u <br>   
section 3v <br> 
section 3w <br>   
section 3x <br>   
section 3y <br>   
section 3z <br>   
section 3aa <br>   
section 3ab <br>   
section 3ac <br>   
section 3ad <br>  
section 3ae <br>   
section 3af <br>   
section 3ag <br>   
section 3ah <br>   
section 3ai <br>   
section 3aj <br>   
section 3ak <br>   
section 3al <br>   
section 3am <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
section 3 <br>   
</div>
  </body>
</html>
于 2012-04-10T22:19:04.833 に答える
0

間違ったDoctypeを使用していて、癖モードになっています。代わりにこれを使用してください：<!DOCTYPE html>

あなたはXHTMLDoctypeを使い始めたと言います。それが、癖から抜け出すためにXHTMLDoctypeがうまく機能している理由です。ただし、XHTMLマークアップを提供していないと確信しているため、これを使用しないでください。

また、CSSで単位を指定していません。指定する値には、px、em、またはパーセントを含める必要があります。

于 2012-04-14T02:14:50.050 に答える
-1

これを試して

        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <meta content="text/html; charset=ISO-8859-1"
          http-equiv="Content-Type">
        <title>Test Junk</title>
        <link rel="stylesheet" type="text/css" href="index.css">
      </head>

      <body>
    <div style="background-color:#cccea2; text-align:center;height:136">
        section 1
    </div>
    <div style="background-color:#ccace2; text-align:center;height:27">
        section 2
    </div>
    <div style="background-color:#225522;text-align:center;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden; height:100%;">
    section 3    
    </div>
    </body>
    </html>
于 2012-04-09T19:13:14.593 に答える