CSS - 2 列布局

Question

我想创建一个 2 列液体布局，左侧导航栏的高度应为 100%，标题的宽度应为 100%，内容部分的高度和宽度应为 100%同样，所有边都应该有 10 或 20 像素的边距，并且在标题、导航和内容框之间也应该有边距。 这是我的小提琴：

https://jsfiddle.net/d2Lnq6sd/1/

header {
  position: relative;
  height: 75px;
  width: 100%;
  background-color: red;
  border: 1px solid black;
}

nav {
  position: relative;
  top: 20px;
  left: 0px;
  height: 100%;
  width: 200px;
  padding: 10px;
  background-color: blue;
  border: 1px solid black;
}

section {
  position: absolute;
  top: 110px;
  left: 240px;
  width: 100%;
  background-color: green;
  border: 1px solid black;
}

现在您可以看到导航栏的高度不是 100%，并且内容部分太宽。 我的最终结果应该是这样的：

http://imageshack.com/a/img921/9425/UYp8Ah.png

尝试在谷歌上找到关于这个问题的帮助，但我仍然没有得到我应该使用什么，相对或绝对位置以及哪个属性使用哪个。 任何指针？

Answer 1

试试这个代码，看看演示：

CSS：

body {
  color: #fff;
  font-family: verdana;
}
header {
  background-color: red;
  border: 1px solid black;
  height: 75px;
  width: 100%;
}
nav {
  background-color: blue;
  border: 1px solid black;
  float: left;
  margin: 2% 0;
  min-height: 300px;
  padding: 10px;
  width: 20%;
  height: 100%;
}
section {
  background-color: green;
  border: 1px solid black;
  float: right;
  position: absolute;
  right: 10px;
  top: 100px;
  width: 75%;
}

见小提琴演示

Answer 2

你很高兴： http ://codepen.io/8odoros/pen/vKxVYv?editors=1100

• 导航栏高度为100%
• 内容部分不太宽

 html, body { height:calc(100% - 60px); } body { font-family: verdana; color: #fff; } .container { position: relative; margin: 10px; padding: 10px; height:100%; box-sizing:border-box; } header { float:left; height: 75px; width: 100%; background-color: red; border: 1px solid black; box-sizing:border-box; } nav { float:left; margin-top:20px; height: 100%; width: 200px; padding: 10px; background-color: blue; border: 1px solid black; box-sizing:border-box; } section { float:right; margin-top:20px; height:100%; padding: 10px; width:calc(100% - 220px); background-color: green; border: 1px solid black; box-sizing:border-box; }

 <div class="container"> <header> This is the header </header> <nav> This is the nav </nav> <section> This is the main section </section> </div>

Answer 3

好吧，所以我改变了一些东西：

https://jsfiddle.net/d2Lnq6sd/9/

我已将您的导航移动到一个旁标记中，这只是 HTML 5 语法链接

通过使用浮动并保持原样，您可以创建所需的效果。 为了使宽度达到 100%，我建议使用填充和边距，使其达到 20% + 80% 的比例。

希望这可以帮助 ：）

Answer 4

Do you need like this ,

Html:
<div class="container">

    <header>
        This is the header
    </header>

    <nav>
        This is the nav
    </nav>

    <section>
        This is the main section
    </section>

</div>
Css:
body {
  font-family: verdana;
  color: #fff;
}

.container {
  position: relative;
  margin: 10px;
  padding: 10px;
}

header {
  position: relative;
  height: 75px;
  width:675px;

  background-color: red;
  border: 1px solid black;
}

nav {
  position: relative;
  top: 20px;
  left: 0px;
  height: 300px;
  bottom:200px;
  width: 200px;
  padding: 10px;
  background-color: blue;
  border: 1px solid black;
}

section {
  position: absolute;
  top: 110px;
  left: 240px;
  width: 100%;
  background-color: green;
  border: 1px solid black;
}



you can see the link:https://jsfiddle.net/d2Lnq6sd/11/

Answer 5

您可以将导航定位为固定，使用下面来了解一下。

nav {
    position: fixed;
    top: 20px;
    left: 0px;
    height: 100%;
    width: 200px;
    padding: 10px;
    background-color: blue;
    border: 1px solid black;
    margin-top: 76px;
}