两列布局左侧固定右侧宽高自适应老是有问题？
<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;
}
会出现超出屏幕 宽和高都没有自适应
慕前端9656150浏览 1407回答 2
2回答
-
小白师兄
首先来说你的你的高度的问题,之所以右侧高度没有撑起来,是因为你的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>根据你的布局自行删改不要的区域!应该看的明白!祝你好运!
随时随地看视频慕课网APP
Html/CSS