CSS-2列布局
CSS-2列布局
提问于 2016-06-29 06:46:37
我想要创建一个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
Stack Overflow用户
回答已采纳
发布于 2016-06-29 07:12:42
你可以走了：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>
Stack Overflow用户
发布于 2016-06-29 07:04:35
尝试下面的代码并查看演示：
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%;
}请参阅小提琴演示
Stack Overflow用户
发布于 2016-06-29 07:07:44
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/页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38092212
复制相关文章
相似问题
腾讯云开发者
