<body>
<div class="warp">
<!-- top main -->
<div id="top-main">
1
</div>
<!-- left main -->
<div id="left-main">
2
</div>
<!-- rigth main -->
<div id="right-main">
5
</div>
</div>
</body> #top-main{
width: 100%;
height:50px;
background-color: #428bca;
}
#left-main{
position: fixed;
width: 220px;
height:100%;
background-color: #5cb85c;
}
#right-main{
margin-left: 220px;
width: 100%;
height:100%;
background-color: #333;
}会出现超出屏幕 宽和高都没有自适应
2 回答
已采纳
小白师兄
TA贡献55条经验 获得超37个赞
首先来说你的你的高度的问题,之所以右侧高度没有撑起来,是因为你的width:100%;不起作用,因为他的父级元素没有定高度,所以,你继承100%的高度是无效的!
解决办法:在样式上加如下代码:
.warp,html,body{
height: 100%;
}
这样就可以把高度撑起来,宽度也撑起来了,但是因为都继承的100%;所以边缘有超过屏幕的滚动条,因为窗体宽度100%;左侧占了220px,那么右侧就没有100%的宽了,但是你还是设置右侧占100%;所以有超过的220px溢出屏幕!
如果想简单的出效果:你可以把上面我给你的代码改成:
.warp,html,body{
height: 100%;
overflow:hidden;
}
隐藏超出的部分,可以有两列布局的效果,但是啊但是,最怕但是了!!
更可怕的是要告诉你,如果你不想用js控制,你的这种两列自适应布局思路是错误的!
这种自适应的我建议用定位布局来实现:
给你个小栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全屏布局</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
根据你的布局自行删改不要的区域!应该看的明白!祝你好运!
- 2 回答
- 0 关注
- 1381 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消