-3

高さ 2 列 (ビューポートの 100%) のレイアウトでサイトを構築したいと考えています。左の列には、固定の高さのナビゲーションと特定の背景が含まれている必要があります。右の列には、別の背景とメイン コンテンツを含める必要があります。

Bootstrap と Foundation の両方をいじってみましたが、どちらもこの背景/列の組み合わせを設定するのが非常に難しいようです。jQueryを使用してそのためのいくつかの解決策を見つけましたが、これにより、そもそも実装するのが難しくないはずの別の層が混乱する可能性があります。

私が行って自分のcssをロールする前に：Bootstrap、Foundation、または他の本格的なフレームワークのいずれかを見て、簡単でJSのないアーカイブ方法はありますか? メイン コンテンツで列やタブなどを使用できるようにしたいので、フレームワークによって多くのコーディングを節約できます。

ありがとう！

4

2 に答える 2

2

CSS テーブルを使用して、簡単に実行できます。ただし、Chromeにはトリックが必要です。

例: CSS:

/* important */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#test {
  background: #ddd;
  display: block; /* important */
  margin: 0;
  /*  max-width: 400px; */
  min-height: 0; /* important */
  overflow: hidden; /* important */
  padding-bottom: 20px;
  width: 100%;
}

#test .twoColumnLayout {
    display: table; /* important */
    height: 100%; /* important */
    margin-top: 20px;
    min-height: 10px; /* necessary for IE */
}

/* important, but only for IE, for others the row doesn't need to be present */
#test .twoColumnLayout .row {
    display: table-row; 
    height: 100%;
}

#test .twoColumnLayout .col {
    display: table-cell; /* important */
    height: 100%; /* important */
    text-align: center;
    width: 50%; /* for 2 columns */
}

#test .twoColumnLayout .col > .content {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    height: 100%; /* important */
    margin: 0 10px;
    padding: 20px;
    position: relative;

    /* webkit fix!!! */
    -webkit-box-sizing: content-box; /* necessary for Chrome!!! */
}

上記のCSSのHTML：

<section id="test">
  <div class="twoColumnLayout">
    <div class="row">
      <div class="col">
        <div class="content">
          Some content here, little bit shorter...
        </div>
      </div>
      <div class="col">
        <div class="content">
          Some content here, little bit longer. Some more content here, so it's even longer...
        </div>
      </div>
    </div>
  </div>
</section>

jsfiddle へのリンク: https://jsfiddle.net/slonisko/xmL5jjct/2/

于 2016-07-14T08:47:16.133 に答える