2-12 老师，请教两个问题 橙色边框宽度的设置和屏幕的布局出现滚动条异常
问题1：border--left:1% solid orange 是不是不能实现边框宽度为屏幕宽度的1%？
问题2：当我设置中间的高度是背景色填充了整个屏幕，但是出现界面内容非常少（删除最后p标签的内容），仍出现滚动条；当界面内容非常多的时候（增加最后p标签的内容），内容无法显示全的问题。（不知道是不是body,html标签设置有问题？）
<!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;
}
div img{
display:block;
}
.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:80px;
line-height: 80px;
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;
}
/*此处写代码*/
.container1{
width:100%;
padding-top:100px;
padding-bottom: 80px;
overflow:hidden;
zoom:1;
height: 100%;
}
.a{
/*background:blue;*/
float:left;
width:30%;
height:100%;
background:blue;
/*
高 自适应？
*/
text-align:left
/*margin:0 auto;*/
background:blue;
/*margin-left:10%;*/
}
.a h3,.a ul{
margin:20px 20px;
}
.b{
float:left;
background:red;
width:30%;
height:100%;
}
.b h3,.b ul{
margin:50px 10px;
}
span{
/*display:inline-block;*/
margin-right:10px;background:#fcc;line-height:2em;
}
body,html{
height: 100%;
background: yellow;
}
.c{
width:39%;
float:right;
background:#ccc;
height: 100%;
border-left:5px solid orange;
}
.c h3,.c ul{
margin: 30px;
}
.c ul{
width: 200px;
height: 100px;
}
.c li{
width: 200px;
height: 80px;
}
/* .border{
float: left;
width: 1%;
background: orange;
height: 100%;
}*/
form{width:300px;
margin: 0 auto;
}
input{
display: block;
width: 250px;
height: 40px;
margin: 5px;
border: 1px solid #black;
width: 250px;
}
input[type="submit"]{
border: none;
background: red;
color: #fff;
}
h5{font-size: 26px;
margin-left:50px;
width: 250px;}
</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">
<h3>课程推荐</h3>
<ul>
<li><span>职业路径</span>HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span>零基础入门Android语法与界面</li>
<li><span>职业路径</span>IOS基础语法与常用控件</li>
<li><span>职业路径</span>PHP入门开发</li>
<li><span>职业路径</span>JAVA入门开发</li>
</ul>
</div>
<div class="b">
<h3>相关课程</h3>
<ul>
<li><span>HTML</span><span>CSS</span><span>JavaScript</span></li>
<li><span>HTML</span><span>CSS</span><span>Jquery</span></li>
<li><span>移动端基础</span><span>移动端APP开发</span></li>
</ul>
</div>
<!-- <div class="border"></div> -->
<div class="c">
<form>
<h5>登录</h5>
<input class="biaodan" type="text" name="no" id="" placeholder="请输入手机号" size="25"> <br/>
<input class="biaodan" type="password" name="mima" id="" placeholder="请输入密码" size="25"><br/>
<input class="submit" type="submit" value="登录" >
</form>
<p>（文章开始）
这枚原本要挑战土星五号登月火箭的"怪物"，在 1969 年到 1972 年的四次发射中，全部失败。苏联的登月计划也因此而草草收场。
如果说猎鹰重型火箭去年的发射还仅是一次破冰尝试，那么，现在两次成功发射、其中一次顺利完成商业发射任务，证明了猎鹰重型火箭在提升推力、降低成本的情况下，依然能够保证可靠性。
在人类对太空的探索历史上，成功完成任务的超重型火箭屈指可数。前苏联曾在 1987-1988 年发射了两次运载火箭，仅测试过将无人的暴风雪号航天飞机送入太空。再往前，便是美国在 1967-1973 年间，在阿波罗计划和天空实验室两项计划中使用的土星五号运载火箭。
而要注意的是，土星五号、 能源号以及从未发射成功的 N-1 登月火箭，都是在太空军备竞赛的背景下，举国家之力推动的成果。在 SpaceX 之前，还从未有商业力量在这方面进行哪怕一次的尝试。
猎鹰重型火箭最终用实际发射时的出色表现打动了美国当局。
2018 年 6 月，在猎鹰重型火箭首次发射后的三个月，美国空军对该火箭进行了评估，并将一个价值 1300 万美元的军方卫星订单交给 SpaceX。后者将在 2020 年中为美国空军发射 AFSPC -52 卫星。
据 Arstechnica 报道，一般来说，在为国家安全任务评估火箭的时候，政府会要求进行多次飞行评估。但这次美国军方在对 SpaceX 猎鹰重型火箭的评估上开了绿灯，仅需一次评估即可。主要原因是，除了猎鹰重型火箭之外，能够达到美国军方发射需求的仅有德尔塔 IV 重型火箭。
这枚原本要挑战土星五号登月火箭的"怪物"，在 1969 年到 1972 年的四次发射中，全部失败。苏联的登月计划也因此而草草收场。
如果说猎鹰重型火箭去年的发射还仅是一次破冰尝试，那么，现在两次成功发射、其中一次顺利完成商业发射任务，证明了猎鹰重型火箭在提升推力、降低成本的情况下，依然能够保证可靠性。
在人类对太空的探索历史上，成功完成任务的超重型火箭屈指可数。前苏联曾在 1987-1988 年发射了两次运载火箭，仅测试过将无人的暴风雪号航天飞机送入太空。再往前，便是美国在 1967-1973 年间，在阿波罗计划和天空实验室两项计划中使用的土星五号运载火箭。
而要注意的是，土星五号、 能源号以及从未发射成功的 N-1 登月火箭，都是在太空军备竞赛的背景下，举国家之力推动的成果。在 SpaceX 之前，还从未有商业力量在这方面进行哪怕一次的尝试。
猎鹰重型火箭最终用实际发射时的出色表现打动了美国当局。
2018 年 6 月，在猎鹰重型火箭首次发射后的三个月，美国空军对该火箭进行了评估，并将一个价值 1300 万美元的军方卫星订单交给 SpaceX。后者将在 2020 年中为美国空军发射 AFSPC -52 卫星。
据 Arstechnica 报道，一般来说，在为国家安全任务评估火箭的时候，政府会要求进行多次飞行评估。但这次美国军方在对 SpaceX 猎鹰重型火箭的评估上开了绿灯，仅需一次评估即可。主要原因是，除了猎鹰重型火箭之外，能够达到美国军方发射需求的仅有德尔塔 IV 重型火箭。（文章结束）</p>
</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>
正在回答
同学你好，可以换一种清除浮动的方式哦，也可以查看你的另一个问答，http://class.imooc.com/course/qadetail/107444
若还是无法解决的话，可以继续提问哦。
祝学习愉快！
你好，1、是的哦，原因如下：
（1）border--left之间，应该是一个-，即：border-left
（2）border-width不支持百分比
2、（1）当我设置中间的高度是背景色填充了整个屏幕，但是出现界面内容非常少（删除最后p标签的内容），仍出现滚动条；
这个是因为高度设置的是100%，然后container1这个盒子有设置上下外边距，导致整体的高度超出100%。
（2）当界面内容非常多的时候（增加最后p标签的内容），内容无法显示全的问题。（不知道是不是body,html标签设置有问题？）
这个是因为高度设置的是100%，加上上下内边距，就是视口的高度，加上下内边距，整体的高度就这么高，但是存放不下右侧的文字哦，而有设置了超出隐藏，所以把超出的文字部分隐藏了，可以去掉.container1元素的overflow: hidden;测试下，是可以显示全的哦。
希望能帮助到你，欢迎采纳。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星