左侧固定,右侧自适应:
index.html:
<div id="outer">
<div id="sidebar" >左侧固定宽度区</div>
<div id="content" >我是右侧块级元素</div>
</div>
<!-- <div id="footer">我是footer,后面的一个DIV,以确保前面的定位不会导致后面的变形</div> -->
最后一行为footer,可选择添加。
index.css:
#sidebar {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
#content {
margin-left: 300px;
height: 100px;
background-color: blue;
}
#footer {
background-color: red;
}
#outer:after {
display: block;
content: '';//不写内容
clear: both;//清除浮动,使该元素位于sidebar下方,使他之后的footer位于下方
background-color: blanchedalmond;
visibility: hidden;
}
#outer {
zoom: 1;//用于放大缩小查看样式,可以不写
background-color: brown;
}
总结:将侧边栏设置 float:left , width:300px(300px只是举个例子,可以任意设置),右半部份设置margin-left:300px,不设置宽高,使其宽高自适应(此时宽度为100%-300px,高度为100%)。如果需要footer则设置outer:after清除浮动。
效果图如下:
上下高度固定,中间滚动
css:
html{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
header {
width: 100%;
height: 120px;
background-color: aqua;
}
main {
background-color: rgba(128, 128, 128, 0.05);
width: 100%;
height: calc(100% - 170px);
overflow: scroll;
}
main div{
height: 900px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgb(37, 37, 37);
color: rgb(112, 112, 112);
}
html:
<body>
<header>
头部内容
</header>
<main>
<div>我是中间的内容</div>
</main>
<footer>
底部内容
</footer>
</body>
效果图:
背景图+登录界面:
html:
<body>
<div class="bg1">
<img src='../../../assets/images/portal/jm_bg_loginPage.jpg' />
</div>
<div class="login">
</div>
</body>
css:
html{
width: 100%;
}
body{
width: 100%;
overflow: hidden;
}
.bg1{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.bg1 img{
width: 100%;
height: 100%;
}
.login{
background-color: rgba(255, 255, 255, 0.9);
color: rgb(68, 63, 56);
position: absolute;
right: 10%;
top: 0;
bottom: 0;
width: 385px;
height: 100%;
}
效果图:
效果说明:大于1024px时,背景随窗口缩放而缩放,右侧白色内容块保持绝对位置;小于1024px时,多余内容隐藏