4

(再び) 子<div>タグのサイズを親のサイズに合わせるという問題があります。親要素は別のスクリプトによって制御され（触れたくない）、可変の高さ/幅で画面上のどこにでも配置できます。以下の私の例では、#container. いくつかの可変サイズといくつかの固定サイズを持つレイアウトを配置したいと思います。

  • フッター (ここでは: #footer)、固定の高さ (たとえば 100px) を持ち、親の幅全体を埋めます
  • 左側のナビゲーション バー (ここでは#left)。固定幅 (たとえば 150px) で、上部の高さ全体を埋めます
  • 残りのスペースである、ナビゲーション バーからすぐのコンテンツ部分。

実際に機能する「フッター」の解決策を見つけました（残りの画面スペースの高さをdivで埋める->「ダニエルズ」による投稿）。#leftしかし、全高を埋める部分は達成できませんでした。

以下は私のコード例です (オンライン バージョン: http://worldtalk.de/v2013/test.html ; 永久にオンラインのままになることはありません!):

<!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">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <style type="text/css" media="screen">
    * {  margin: 0; }
    html, body { height: 100%; }
    #container {
        position: absolute; /* have no control over that container element */
        width: 400px;  height: 300px;
        top: 100px;    left: 10px;
        background: red;
    }
    #upper {
        min-height: 100%;
        height:     auto !important;
        height:     100%;
        margin:     0 auto -100px; /* -100px being the size of the footer */
    }
    #footer {
        background: green;
        height: 100px;
    }
    #left {
      background: yellow;
      float: left; width: 150px;

      /* the following CSS doesn't do what I want... */

      min-height: 100%;
      height:     auto !important;
      height: 100%;
    }
    </style>
</head>
<body>
    <div id="container">
      <div id="upper">
        <div id="left">left - shall reach down until footer</div>
        content part...<br> shall be next to it...
      </div>
      <div id="footer">footer</div>
    </div>
</body>
</html>

JavaScript を使用せずにこれを達成するためのアイデアはありますか?

よろしく、ステファン

4

1 に答える 1

4

解決策 1

問題position:absolute;は、左のナビゲーションがフッターの上に配置されることだと思いますが、左のナビゲーションとフッターの両方に絶対を使用するソリューションを次に示します。問題は、左のナビゲーションがフッターの下に続くことです。これは問題になる場合とそうでない場合があります。

#footer {
  position:absolute;
  left:0;
  right:0;
}

#left {
  position:absolute;
  bottom:0;
}

http://jsfiddle.net/LmCLz/1/

解決策 2

要素を次のように並べ替えます。

<div id="container">
    <div class="inner">
        <div id="left">left - shall reach down until footer</div>
        <div id="right">content part...<br> shall be next to it...</div>
        <div class="clear"></div>
    </div>
    <div id="footer">footer</div>
</div>

次に、 a を適用しmargin-bottom:-100px;てフッター用のスペースを作ります。

.inner {
    height:100%;
    margin-bottom:-100px;
}

http://jsfiddle.net/LmCLz/3/

于 2013-02-11T11:01:40.903 に答える