0

min-height プロパティと height プロパティに問題があります。

http://nickhellemans.be/nick/testing/

コンテンツが 100% より大きい場合、青色の列はページの最後まで表示されません。(全画面)

HTML

    <div id="wrapper">
        <section id="sidebar">
        test
        </section>
        <section  class="contentViewer">
             content goes here
        </section>

    </div>

CSS

body, html {
height:100%;
}

#wrapper {
width:100%;
height:100%;
}

section#sidebar {
float:left;
width:300px;
min-height:100%;
height: auto !important;
margin: auto;
background-color: blue;
overflow: hidden;
}

section.contentViewer {
height:auto;
position:absolute;
top:0;
right:0;
left:300px;
font-family: "brandon";
font-size:18pt;
}

すでにグーグルで検索しようとしましたが、問題に合った答えを見つけることができませんでした。この問題に精通していて、正しい解決策を知っている人はいますか?

前もって感謝します

ニック

4

1 に答える 1

0

編集（再び笑）

親は絶対配置の子要素に合わせてスケーリングしないため、フロートと絶対配置を避ける必要があります。スケールしないため、デフォルトで 100% になります。テーブル構造を使用することをお勧めします (左の列、右の列、垂直方向の上部の幅: 100% など)

body, html, #wrapper { height: 100%; } /* defaults to 100% height */
#wrapper { display: table; }
#wrapper > * { display: table-cell; vertical-align: top; height: 100%; } /* Behave as tablecells */
#sidebar { background-color: blue; min-width: 200px; } /* min-width is important since other cell is 100% */
.contentViewer { background-color: red; width: 100%; } /* Fill up remaining space */
.container { position: relative; height: 100%; width: 100%; } /* Use containers for relative positioning '*/


<div id="wrapper">
  <section id="sidebar">
    <div class="container">
      <p>Left side</p>
    </div>
  </section>
  <section  class="contentViewer">
    <div class="container">
      <p>Yoopie</p>
    </div>
  </section>
</div>

上記のコードは、CSS テーブルを使用した 2 列レイアウトの基本構造です。相対的な配置を使用できる一方で、流動的な設計が可能になります。通常、テーブルセルは position: relative; をサポートしていません。だから私は常に .container div をテーブルセルの直接の子要素として使用します

于 2013-01-14T18:45:28.727 に答える