1

我想创建一个 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

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

4

5 回答 5

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

见小提琴演示

于 2016-06-29T07:04:35.447 回答
1

你很高兴：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>

于 2016-06-29T07:12:42.163 回答
0

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

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

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

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

希望这可以帮助 ：）

于 2016-06-29T07:04:31.663 回答
-1 
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/
于 2016-06-29T07:07:44.077 回答
-2

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

nav {
    position: fixed;
    top: 20px;
    left: 0px;
    height: 100%;
    width: 200px;
    padding: 10px;
    background-color: blue;
    border: 1px solid black;
    margin-top: 76px;
}
于 2016-06-29T06:57:00.537 回答