Question

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

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

请参阅Fiddle Demo

Answer 2

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

导航栏高度100％
内容部分不宽

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

好吧所以我改变了一些事情：

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语法Link

通过使用浮动并保持原位，您可以创建所需的效果。为了使宽度达到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;
}

CSS - 2列布局

5 个答案: