-3

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

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

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

谢谢！

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 回答
0

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

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

于 2013-04-28T22:56:56.993 回答