两列，全高，响应式布局。使用哪个框架？ [关闭]答案

【问题标题】：Two Columns, full height, responsive layout. Which framework to use? [closed]两列，全高，响应式布局。使用哪个框架？ [关闭]
【发布时间】：2012-11-05 11:27:02
【问题描述】：

我想建立一个具有两列全高（100% 视口）布局的网站。左栏应该包含一个固定高度的导航和一个特定的背景。右栏应包含不同的背景和主要内容。

我玩弄了 Bootstrap 和 Foundation，但似乎都让背景/列的这种组合很难设置。我找到了一些使用 jQuery 的解决方案，但恕我直言，这会给原本不难实现的东西带来另一层可能的混乱。

在我开始编写自己的 css 之前：是否有一种简单的、非 JS 的归档方式，可以在 Bootstrap、Foundation 或任何其他成熟的框架中查看？我希望能够在主要内容中使用列、选项卡等，这样框架可以为我节省大量编码。

谢谢！

【问题讨论】：

设置一个基本的布局并不是“大量的编码”，使用一个框架来完成你说你可以手动完成的事情对于下载速度、可维护性等来说是不值得的。只是自己写

标签： css twitter-bootstrap zurb-foundation

【解决方案1】：

使用 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/

【讨论】：

漂亮！我如何将列拆分为 70-30% 而不是 50-50%？我试过了，它正在躲避我。谢谢。
您可以将新类添加到列（col-30、col-70）。我在这里做了一些更新jsfiddle.net/slonisko/xmL5jjct/7 :)
谢谢，拉多斯拉夫。

【解决方案2】：

我也尝试过 Bootstrap 和其他一些网格系统，恕我直言，它们仅在您要编写更复杂的网站时才有用。如果你只需要两列，那肯定是大材小用了。

例如，这花了我 2 分钟的时间来设置，并且似乎回答了您的请求： http://jsbin.com/abeciz/1/edit

【讨论】：

如果内容大于视口并且需要滚动，则不起作用。