Html 边栏，导航和内容怎么做？
我的CSS有问题。 我在一个网站上工作，我想使我自己的CSS，我试图使自己，但我不能找出它 我的目标是一个网站，看起来像这样 但现在看起来是这样的： 我尽力了。我正在使用一些CSS现在，但它不是工作的方式，我想要它太多Html 边栏，导航和内容怎么做？,html,css,Html,Css,我的CSS有问题。 我在一个网站上工作，我想使我自己的CSS，我试图使自己，但我不能找出它 我的目标是一个网站，看起来像这样 但现在看起来是这样的： 我尽力了。我正在使用一些CSS现在，但它不是工作的方式，我想要它太多 html { background: #ECF0F1; } .sidebar { width: 20%; height: 100%; float: left; background: #043D5D; position: fixed; top
html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}
有更好的方法吗？提前谢谢 在这里查看我的JSFIDLE： 我希望它能对你有用 代码如下：
body {
background: #ECF0F1;
}
.clear {
clear:both;
}
.nav {
width:100%;
float: left;
background:red;
}
.logo{
width: 20%;
float:left;
}
.search {
width:78%;
float:left;
padding: 10px 1%;
text-align:right;
}
.sidebar {
width: 16%;
background: green;
float:left;
padding: 2% 2%;
}
.content {
width: 80%;
float:left;
position:relative;
background: yellow;
height: 466px;
}
.subbar {
background: gray;
height: 200px;
}
.content .bottom {
position:absolute;
bottom:0px;
background: blue;
width:90%;
padding: 5%;
}
<body>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/40x40">EasyMusic
</div>
<div class="search">
<input type="text">
</div>
</div>
<div class="clear"></div>
<div class="sidebar">
<div class="subbar" id="1">
<p>Sidebar, links here</p>
</div>
<div class="subbar" id="2">
<p>Bottom</p>
</div>
</div>
<div class="content">
<p>Content, everything here</p>
<div class="bottom">
bottom
</div>
</div>
<div class="clear"></div>
</body>
轻松音乐
侧边栏，链接在这里
底部
内容，这里的一切
底部