0

これらのプロパティを使用して、ネストされた div をレイアウトできるようにしたいと考えています。

  • width: 100%
  • height: 100%
  • padding: 10px

パディングが計算される前ではなく、残りのスペースの幅と高さが 100% になるようにしたいのです。それ以外の場合、次の例のようなドキュメントがある場合、子はスクロールバーを表示します。しかし、スクロールバーは主な問題ではなく、子が親コンテナーの幅を超えて伸びるという事実です。

すべてのposition: absolute宣言を使用できますが、それは正しくないようです。コードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>Liquid Layout</title>
    <style>
      body, html {
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        background-color:black;
      }
      #container {
        position:relative;
        width:100%;
        height:100%;
        background-color:red;
        opacity:0.7;
      }
      #child1 {
        position:relative;
        width:100%;
        height:100%;
        padding:10px;
        background-color:blue;
      }
      #nested1 {
        position:relative;
        background-color: white;
        width:100%;
        height:100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="child1">
        <div id="nested1"></div>
      </div>
    </div>
  </body>
</html>

position:relativeor position:static、およびパーセント サイズを使用して、親の幅/高さからパディングとマージンを引いた値に従って、パーセント サイズの子を作成するにはどうすればよいですか? position:absolute左/右/上/下に頼る必要がありますか?

助けてくれてありがとう、ランス

4

1 に答える 1

1

パディングが計算される前ではなく、残りのスペースの幅と高さが 100% になるようにしたいのです。

それを行うための光沢のある未来的な方法は次のとおりです。

#something {
    width: 100%; height: 100%; padding: 10px;
    box-sizing: border-box; -moz-box-sizing: border-boz; -webkit-box-sizing: border-box;
}

ただし、これはバージョン 8 より前の IE では機能しません。

position:absolute と left/right/top/bottom に頼る必要がありますか?

これは別の方法ですが、バージョン 7 より前の IEでは、「エッジ ポジショニング」(topおよびbottomではなくのポジショニングheight、および同様にleft/ right/のポジショニング) は機能しません。width

スクロールバーは主な問題ではなく、子が親コンテナーの幅を超えて伸びるという事実です。

横向きでも問題ありません。widthデフォルトのままにしautoておくと、親の全幅からパディングを引いたものを受け取ります。唯一の問題は、 でその動作が得られないことですheight。

ハイブリッド アプローチ: auto- width、100%高さ with box-sizing、および IE6-7 でのみ実行されるハック JS を追加して、そこで高さを修正しますか?

于 2010-04-24T09:13:54.183 に答える