<body> <html>高的自适应的修改后的问题（设置height:100%后，内容无法显示全）
老师，按建议我增加了body和html height:100%的效果，但是文字暂满整个区域的时候，文字无法完全显示，其中有个原因是container1 设置了overflow:hidden，但不设置的话就无法清除浮动，很矛盾。有没有一种既可以高度100%显示不受分辨率限制并且能够将内容显示全的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul{
margin:0px;
padding:0px;
}
ul{list-style: none;}
a{
text-decoration:none;
color: #fff;
}
.container{
width:100%;
margin:0 auto;
height: 100%;
}
.header {
position: fixed;
top: 0;
left:0;
width:100%;
height:100px;
background:#ccc;
overflow: hidden;
zoom:1
}
.header .logo{
float:left;
width: auto;
height: auto;
margin:0 40px;
}
.header .nav{
float:right;
overflow: hidden;
zoom:1;
padding-right:40px;
}
.header .nav li{
float:left;
height:80px;
margin-right:20px;
}
.header .nav li a{
height:100px;
line-height:100px;
padding: 0 10px;
display:block;
font-family: '微软雅黑';
font-size:16px;
color:#333;
}
.footer{
width:100%;
/*height:100px;*/
position:fixed;
bottom:0;
}
.footer ul{
background: black;
overflow: hidden;
zoom:1;
width:100%;
/*height:80px;*/
text-align:center;
}
.footer ul li{
/*float:left;*/
display:inline-block;
/*height: 80px;*/
line-height: 80px;
margin-right:30px;
margin-left: 30px;
font-size: 25px;
}
body,html{height: 100%;
}
.container1{
height: 100%;
width:100%;
background:yellow;
/*margin: 50px;*/
margin-top: 100px;
margin-bottom: 80px;
/*padding-top:150px;*/
/*padding-bottom:80;*/
overflow:hidden;
zoom:1;
}
.a{
background:blue;
float:left;
width:50%;
height:100%;
}
.b{
float:right;
background:red;
width:50%;
height:100%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="header">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /></a></div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="container1">
<div class="a">（文章开始）这枚原本要挑战土星五号登月火箭的"怪物"，在 1969 年到 1972 年的四次发射中，全部失败。苏联的登月计划也因此而草草收场。
如果说猎鹰重型火箭去年的发射还仅是一次破冰尝试，那么，现在两次成功发射、其中一次顺利完成商业发射任务，证明了猎鹰重型火箭在提升推力、降低成本的情况下，依然能够保证可靠性。
在人类对太空的探索历史上，成功完成任务的超重型火箭屈指可数。前苏联曾在 1987-1988 年发射了两次运载火箭，仅测试过将无人的暴风雪号航天飞机送入太空。再往前，便是美国在 1967-1973 年间，在阿波罗计划和天空实验室两项计划中使用的土星五号运载火箭。
而要注意的是，土星五号、 能源号以及从未发射成功的 N-1 登月火箭，都是在太空军备竞赛的背景下，举国家之力推动的成果。在 SpaceX 之前，还从未有商业力量在这方面进行哪怕一次的尝试。
猎鹰重型火箭最终用实际发射时的出色表现打动了美国当局。
2018 年 6 月，在猎鹰重型火箭首次发射后的三个月，美国空军对该火箭进行了评估，并将一个价值 1300 万美元的军方卫星订单交给 SpaceX。后者将在 2020 年中为美国空军发射 AFSPC -52 卫星。
据 Arstechnica 报道，一般来说，在为国家安全任务评估火箭的时候，政府会要求进行多次飞行评估。但这次美国军方在对 SpaceX 猎鹰重型火箭的评估上开了绿灯，仅需一次评估即可。主要原因是，除了猎鹰重型火箭之外，能够达到美国军方发射需求的仅有德尔塔 IV 重型火箭。
<p>
123这枚原本要挑战土星五号登月火箭的"怪物"，在 1969 年到 1972 年的四次发射中，全部失败。苏联的登月计划也因此而草草收场。
如果说猎鹰重型火箭去年的发射还仅是一次破冰尝试，那么，现在两次成功发射、其中一次顺利完成商业发射任务，证明了猎鹰重型火箭在提升推力、降低成本的情况下，依然能够保证可靠性。
在人类对太空的探索历史上，成功完成任务的超重型火箭屈指可数。前苏联曾在 1987-1988 年发射了两次运载火箭，仅测试过将无人的暴风雪号航天飞机送入太空。再往前，便是美国在 1967-1973 年间，在阿波罗计划和天空实验室两项计划中使用的土星五号运载火箭。
而要注意的是，土星五号、 能源号以及从未发射成功的 N-1 登月火箭，都是在太空军备竞赛的背景下，举国家之力推动的成果。在 SpaceX 之前，还从未有商业力量在这方面进行哪怕一次的尝试。
猎鹰重型火箭最终用实际发射时的出色表现打动了美国当局。
2018 年 6 月，在猎鹰重型火箭首次发射后的三个月，美国空军对该火箭进行了评估，并将一个价值 1300 万美元的军方卫星订单交给 SpaceX。后者将在 2020 年中为美国空军发射 AFSPC -52 卫星。
据 Arstechnica 报道，一般来说，在为国家安全任务评估火箭的时候，政府会要求进行多次飞行评估。但这次美国军方在对 SpaceX 猎鹰重型火箭的评估上开了绿灯，仅需一次评估即可。主要原因是，除了猎鹰重型火箭之外，能够达到美国军方发射需求的仅有德尔塔 IV 重型火箭。
</p>
<p>
456这枚原本要挑战土星五号登月火箭的"怪物"，在 1969 年到 1972 年的四次发射中，全部失败。苏联的登月计划也因此而草草收场。
如果说猎鹰重型火箭去年的发射还仅是一次破冰尝试，那么，现在两次成功发射、其中一次顺利完成商业发射任务，证明了猎鹰重型火箭在提升推力、降低成本的情况下，依然能够保证可靠性。
在人类对太空的探索历史上，成功完成任务的超重型火箭屈指可数。前苏联曾在 1987-1988 年发射了两次运载火箭，仅测试过将无人的暴风雪号航天飞机送入太空。再往前，便是美国在 1967-1973 年间，在阿波罗计划和天空实验室两项计划中使用的土星五号运载火箭。
而要注意的是，土星五号、 能源号以及从未发射成功的 N-1 登月火箭，都是在太空军备竞赛的背景下，举国家之力推动的成果。在 SpaceX 之前，还从未有商业力量在这方面进行哪怕一次的尝试。
猎鹰重型火箭最终用实际发射时的出色表现打动了美国当局。
2018 年 6 月，在猎鹰重型火箭首次发射后的三个月，美国空军对该火箭进行了评估，并将一个价值 1300 万美元的军方卫星订单交给 SpaceX。后者将在 2020 年中为美国空军发射 AFSPC -52 卫星。
据 Arstechnica 报道，一般来说，在为国家安全任务评估火箭的时候，政府会要求进行多次飞行评估。但这次美国军方在对 SpaceX 猎鹰重型火箭的评估上开了绿灯，仅需一次评估即可。主要原因是，除了猎鹰重型火箭之外，能够达到美国军方发射需求的仅有德尔塔 IV 重型火箭。(文章结束)
</p></div>
<div class="b">相关推荐</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网页首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>0
收起
正在回答
1回答
同学你好！
内容没有全部显示出来的原因是设置了视口高度百分之百，且有外边距。
这里可以不给height设置高度，文字即可全部显示出来。
如果还要清楚浮动 可以使用 伪类来实现：after/:berfor来清除 。
如果帮助到了你欢迎采纳~祝学习愉快~
相似问题
文本内容自适应
14
0
6
关于div的height属性设置失效
21
3
4
怎样实现全屏的渐变
0
0
5
老师，请问如何实现中间的区域 高的 自适应？
1
0
3
为什么把图片设为背景会显示不出来？
17
0
7
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星