3

さて、css と html を十分に長く扱ってきた人なら誰でも、おそらく "height:100%" というばかげた問題に対処したことがあるでしょう。私はそれに対処することについていくつかのことを読みましたが、あまり役に立ちませんでした。以下は、私が構築する必要があるレイアウトです。良い答えが、高さを必要とする他のほとんどの構造に役立つことを願っています。
ルール:

  • スクロールバーを表示せずにブラウザー ウィンドウをいっぱいにする必要があります。
  • コンテナーの高さは、表示領域を超えてはなりません (つまり、スクロールバーを削除するためだけに、html または body タグに「overflow:hidden」を要求しないでください)。
  • FLEX 領域は特定のピクセル測定値に合わせて調整できる必要がありますが、FILLER は使用可能な領域を埋める必要があります。
  • すべての領域は、オーバーフローしたときに領域を大きくせずにコンテンツが切り取られるように厳密にサイズ設定する必要があります。
  • 可能であれば、「position:fixed」または「position:absolute」なしで実行したいと思います。後で別のラッパー内でそのような構造が必要になった場合に備えて、とりあえず。
  • 最後に、JavaScript を使用したくありません。
+ -------------------------------------------+
| | フレックス /\ |
| | \/ |
+-------------------------------------+-------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | /\ | | |
| | < フィラー > | フレックス |
| | \/ | <- -> |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+-------------------------------------+-------+

編集:
これまでのところ、@cimmanon が 2 番目の例で言っていることを達成でき、さらにヘッダーの横の余分なスペースを削除できることがわかりました。これを行うには、2 つのテーブル (1 つはヘッダーの両方をラップするテーブル、もう 1 つはコンテンツとサイドバーをラップするテーブル) を作成しましたが、これは悪い習慣です。しかし、それが唯一の方法である場合 (従来の css に固執し、flexbox のようなハックの使用を避けようとしている間)、私はそれに固執しています。

@cimmanon の 2 番目の例にも見られる問題が 1 つあります: . 各コンテナーに多数のランダムなボックスを追加した後、下の 2 つのコンテナーがブラウザーの下部を超えて押し出され、スクロールバーが作成されていることがわかりました。これは、height:100% がブラウザーのビューポートの高さ、またはそれより高い場合はコンテンツの高さ (この場合は高さ) を意味するという厄介な概念によるものです。

これを回避する方法はありますか？

4

2 に答える 2

4

これを行う最もエレガントな方法は、Flexbox を使用することです。

http://codepen.io/cimmanon/pen/rifzt

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#layout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  /* fix for old Firefox */
  width: 100%;
}

#layout header {
  height: 10em;
  background: #ffffcc;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
  /* fix for old Firefox */
  width: 100%;
}

#layout article {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#layout aside {
  width: 15em;
  background: #ccccff;
}

<article id="layout">
  <header>
    <h1>Header Title</h1>
  </header>

  <div class="wrapper">
    <article>
      <h1>Another Title</h1>

      <p>...</p>
    </article>

    <aside>
      <h1>Aside Title</h1>

      <p>...</p>
    </aside>
  </div>
</article>

http://caniuse.com/flexbox

代わりに table/table-row/table-cell 表示プロパティを使用してこれを行うこともできますが、それを機能させるには多くのマークアップを追加する必要があります。

これはほとんど機能しますが、ヘッダーはビューポートの全幅に完全には及びません。十分な要素を追加すれば、それができるかもしれません。

http://tinker.io/38b0d

html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    height: 100%;
    background: yellow;
}

header {
    height: 10em;
    display: table-row;
}

article {
    display: table-row;
    height: 100%;
    width: 100%;
    background: grey;
}

article div, article aside {
    display: table-cell;
    height: 100%;
}

article aside {
    width: 10em;
    background: orange;
}

<header>Header</header>

<article>
    <div class="main">
        Remaining Space
    </div>

    <aside>
        Sidebar
    </aside>
</article>
于 2013-05-19T19:03:30.913 に答える