CSS版图设计

Question

我想要创建这个CSS布局。

​

​

div的结构如下：

<div class="header"></div>
<div class="content">
  <div class="left"></div>
  <div class="right"></div>
</div>

有人能帮我创建所需的css类吗？

Edit1:标题+主要内容应该填充屏幕高度。

Answer 1

​

.header {
  background-color:brown;
  height:10vh;
}
.content {
  height:90vh;
}
.left {
  width:25%;
  height:100%;
  background-color:#AAAAFF;
  float: left;
  overflow: scroll;
}
.right {
  width:75%;
  height:100%;
  background-color:#FFAAAA;
  float: right;
  overflow: hidden;
}

<div class="header"><p> HELLO I AM A HEADER </p></div>
<div class="content">
  <div class="left"><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p><p> WORDS </p></div>
  <div class="right"><p> SOME MAIN CONTENT IN HERE! </p></div>
</div>

​

运行这个代码片段来查看一个例子，这里是一个非常基本的布局，让您开始。

编辑:设置100 the的高度将创建一个与屏幕大小相等的div。你可以在这里读到：使div 100%高的浏览器窗口

Answer 2

以下是另一种方法：

http://jsfiddle.net/austinthedeveloper/kk3ywj2x/

秘诀是使用calc而不是vh。确保您知道这个只支持IE10及以上。

.header {
    height: 120px;
}
.content {
    height: calc(100% - 120px);
}

这允许固定高度的东西，如页眉和页脚。这种方法与SASS结合时效果很好，因为高度是可以很容易改变的变量。

溢出区域需要附加以下内容：

.right {
    overflow-y: auto;
}

如果您总是希望滚动条在那里，您可以将其更改为滚动。