CSS

Question

我想创建一个 2 列流式布局，左侧导航栏的高度应为 100%，header 的宽度应为 100%，内容部分应为高度和宽度也应为 100%，所有边应有 10 或 20 像素的边距，header、导航和内容框之间也应有边距。这是我的 fiddle:

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

尝试在 google 上寻求有关此问题的帮助，但我仍然不知道我应该使用什么，相对或绝对位置以及哪个用于哪个属性。有什么指点吗？

Answer 1

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

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

Answer 2

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

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

body,html { height:100%; } body { font-family: verdana; color: #fff; } .container { position: relative; margin: 10px; padding: 10px; width: 73%; float: left; height:auto; } header { position: relative; height: 75px; width: 100%; background-color: red; border: 1px solid black; } aside { float:left; width:20%; margin-top:15px; margin-left:5px; height: 100%; background-color: blue; border: 1px solid black; } section { width: 100%; background-color: green; border: 1px solid black; }

我已将您的导航移动到 aside 标签中，这只是 HTML 5 语法 Link

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

希望这对您有所帮助:)

Answer 3

尝试此代码并查看演示：

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%;
}

见Fiddle Demo

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

一切顺利：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>

CSS - 2 列布局

CSS - 2 Column Layout

html

multiple-columns