响应式布局-v1.0

<style>
.header {
height: 60px;
border: 1px solid green;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.logo {
width: 60px;
height: 60px;
border: 1px solid red;
float: left;
}
.user {
width: 100px;
height: 30px;
border: 1px solid black;
float: right;
bottom: 10px;
right: 10px;
position: absolute;
}
.wrap:after {
clear: both;
content: '';
display: block;
}
.content-out {
width: 100%;
float: left;
margin-left: -202px;
}
.content {
height: 300px;
border: 1px solid blue
4000
;
margin-left: 202px;
margin-right: 10px;
}
.aside {
width: 200px;
height: 300px;
border: 1px solid red;
float: right;
}
.footer {
height: 40px;
border: 1px solid black;
margin-top: 10px;
}
</style>

<div class="header">
<div class="logo">Logo</div>
<div class="user">用户名</div>
</div>
<div class="wrap">
<div class="content-out">
<div class="content">content - 自适应宽度</div>
</div>
<div class="aside">aside - 定宽200px</div>
</div>
<div class="footer">footer</div>