老师，请问如何实现中间的区域 高的 自适应？
请问如何实现中间的区域 高的 自适应？（比如如何实现当文字沾满超过了整个中间的区域的范围，字体会自动缩小，内容也能全部展示？）
<!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;
}
.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;
}
.container1 img{
width:100%;
}
.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%;
/*margin: 50px;*/
padding-top:100px;
padding-bottom: 80px;
overflow:hidden;
zoom:1;
}
.a{
background:blue;
float:left;
width:50%;
/*
高 自适应？
*/
}
.b{
float:right;
background:red;
width:50%;
}
</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">课程推荐</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>
正在回答
同学你好，对于你现在说的这种情况，可以让中间的内容（文字）撑开盒子的高度 。不给body，和中间的盒子设置高度。而且一般两栏布局中，中间的内容左右侧的内容都是差不多的。可以有内容开相同的高度。示例：
如果内容不多，不能够占满当前浏览器的窗口高度。但是又想要中间内容与页脚之间没有空白距离， 可以参考上次回答的方法哦。
如果帮助到了你， 望采纳
祝学习愉快～～～
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星