[英]CSS - 2 Column Layout
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes.我想创建一个 2 列液体布局,左侧导航栏的高度应为 100%,标题的宽度应为 100%,内容部分的高度和宽度应为 100%同样,所有边都应该有 10 或 20 像素的边距,并且在标题、导航和内容框之间也应该有边距。 Here is my fiddle:
这是我的小提琴:
https://jsfiddle.net/d2Lnq6sd/1/ 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;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide.现在您可以看到导航栏的高度不是 100%,并且内容部分太宽。 My final result should look like this:
我的最终结果应该是这样的:
http://imageshack.com/a/img921/9425/UYp8Ah.png http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute.尝试在谷歌上找到关于这个问题的帮助,但我仍然没有得到我应该使用什么,相对或绝对位置以及哪个属性使用哪个。 any pointers?
任何指针?
Try this code and see demo:试试这个代码,看看演示:
CSS: 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%;
}
See Fiddle Demo见小提琴演示
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100你很高兴: http ://codepen.io/8odoros/pen/vKxVYv?editors=1100
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>
Alright so I changed a few things:好吧,所以我改变了一些东西:
https://jsfiddle.net/d2Lnq6sd/9/ 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; }
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link我已将您的导航移动到一个旁标记中,这只是 HTML 5 语法链接
By using floats and keeping the positions as they were you are able to create the desired effect.通过使用浮动并保持原样,您可以创建所需的效果。 To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
为了使宽度达到 100%,我建议使用填充和边距,使其达到 20% + 80% 的比例。
Hope this helps :)希望这可以帮助 :)
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/
You can position nav as fixed, use below to get an idea.您可以将导航定位为固定,使用下面来了解一下。
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.