关于高度问题
同样的代码，蓝色区高度600px。
在火狐浏览器下高度过小，会出现空白（图1是火狐浏览器下的）
在360浏览器下又过大，会出现滚动条（图2是360浏览器下的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蛋蛋的网页3</title>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
box-sizing: border-box;
}
.header{
width: 100%;
height: 100px;
background-color: #000;
position: fixed;
top: 0;
}
.logo{
width: 30%;
height: 100px;
float: left;
}
.nav{
width: 70%;
height: 100px;
float: right;
}
.nav li{
display: inline-block;
line-height: 100px;
margin-right: 60px;
}
.nav li:nth-child(5){
margin-right: 30px;
}
.nav ul{
text-align: right;
line-height: 100px;
}
a{
text-decoration: none;
font-size: 25px;
color: #fff;
}
.body{
background-color: skyblue;
width: 100%;
height: 600px;
padding-top: 100px;
padding-bottom: 100px;
}
.test1{
width: 50%;
height: 600px;
line-height:3em;
float: left;
padding-top: 50px;
padding-left: 300px;
}
.test1 span{
background-color: #ff6a6a;
}
.test2
{
width: 50%;
height: 600px;
line-height: 3em;
float: right;
padding-top: 50px;
padding-left: 100px;
}
.footer{
width: 100%;
height: 100px;
background-color: #000;
position: fixed;
bottom: 0;
}
.footer ul{
text-align: center;
line-height: 100px;
}
.footer li{
display: inline-block;
margin: 0 50px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<a href="http://www.imooc.com" target="_blank">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>
</a>
</div>
<div class="nav">
<ul>
<li><a href="#" target="_blank">课程</a></li>
<li><a href="#" target="_blank">职业路径</a></li>
<li><a href="#" target="_blank">实战</a></li>
<li><a href="#" target="_blank">猿问</a></li>
<li><a href="#" target="_blank">手记</a></li>
</ul>
</div>
</div>
<div class="body">
<div class="test1">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> iOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="test2">
<h2>相关课程</h2>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jwuery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="footer">
<ul>
<li><a href="#" target="_blank">网站首页</a></li>
<li><a href="#" target="_blank">企业合作</a></li>
<li><a href="#" target="_blank">人才招聘</a></li>
<li><a href="#" target="_blank">联系我们</a></li>
<li><a href="#" target="_blank">常见问题</a></li>
<li><a href="#" target="_blank">友情链接</a></li>
</div>
</body>
</html>怎么解决这种高度问题？
20
收起
正在回答
1回答
视口被均分为100单位的vh,是css3的属性
可以试一试这样写
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星