首先来说你的你的高度的问题,之所以右侧高度没有撑起来,是因为你的width:100%;不起作用,因为他的父级元素没有定高度,所以,你继承100%的高度是无效的!
解决办法:在样式上加如下代码:
.warp,html,body{
height: 100%;
}
这样就可以把高度撑起来,宽度也撑起来了,但是因为都继承的100%;所以边缘有超过屏幕的滚动条,因为窗体宽度100%;左侧占了220px,那么右侧就没有100%的宽了,但是你还是设置右侧占100%;所以有超过的220px溢出屏幕!
如果想简单的出效果:你可以把上面我给你的代码改成:
.warp,html,body{
height: 100%;
overflow:hidden;
}
隐藏超出的部分,可以有两列布局的效果,但是啊但是,最怕但是了!!
更可怕的是要告诉你,如果你不想用js控制,你的这种两列自适应布局思路是错误的!
这种自适应的我建议用定位布局来实现:
给你个小栗子:
全屏布局
html,
body,
.parent {
margin: 0;
height: 100%;
overflow: hidden;
}
body {
color: white;
}
.top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: blue;
}
.left {
position: absolute;
left: 0;
top: 100px;
bottom: 50px;
width: 200px;
background: red;
}
.right {
position: absolute;
left: 200px;
top: 100px;
bottom: 50px;
right: 0;
background: pink;
overflow: auto;
}
.right .inner {
min-height: 1000px;
}
.bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: black;
}
top
left
right
bottom
根据你的布局自行删改不要的区域!应该看的明白!祝你好运! |
天盟APP下载
