Question

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

我玩弄了Bootstrap和Foundation，但两者似乎都很难设置背景/列的组合。我用jQuery找到了一些解决方案但imho这会引入另一层可能混淆的东西，这些东西一开始并不难实现。

在我开始之前，我只是推出自己的CSS：在Bootstrap，Foundation或任何其他完全成熟的框架中，是否存在简单，无JS的归档方式？我希望能够在主要内容中使用列，标签等，这样一个框架可以为我节省大量代码。

谢谢！

Answer 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/

Answer 2

我也尝试过Bootstrap和其他一些网格系统，只有当你要编写一个更复杂的网站时，它们才有用。如果你只需要两列，它们肯定是矫枉过正的。

例如，我花了2分钟设置，似乎回答了你的要求： http://jsbin.com/abeciz/1/edit

两列，全高，响应式布局。使用哪个框架？

2 个答案: