宽度缩小的时候footer怎么不下去？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实验</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
@font-face {
font-family: 'NotoSansHans-Black'; /*字体名称*/
src: url('../fonts/NotoSansHans-Black.otf');
}
@font-face {
font-family: 'NotoSansHans-Bold'; /*字体名称*/
src: url('../fonts/NotoSansHans-Bold.otf');
}
@font-face {
font-family: 'NotoSansHans-DemiLight'; /*字体名称*/
src: url('../fonts/NotoSansHans-DemiLight.otf');
}
@font-face {
font-family: 'NotoSansHans-Light'; /*字体名称*/
src: url('../fonts/NotoSansHans-Light.otf');
}
@font-face {
font-family: 'NotoSansHans-Medium'; /*字体名称*/
src: url('../fonts/NotoSansHans-Medium.otf');
}
@font-face {
font-family: 'NotoSansHans-Regular'; /*字体名称*/
src: url('../fonts/NotoSansHans-Regular.otf');
}
@font-face {
font-family: 'NotoSansHans-Thin-Windows'; /*字体名称*/
src: url('../fonts/NotoSansHans-Thin-Windows.otf');
}
a{
text-decoration: none;
}
aside{
width:100%;
height: 28em;
}
aside > .container{
height: 100%;
padding:0;
}
.col-md-6,col-ms-12,col-xs-12{
padding:0;
}
.one{
color:#1E249B;
}
.left,.right{
margin-left:20px;
width:6em;
height: 3em;
border-bottom: 1px solid #1E249B;
}
span{
font-size: 18px;
font-family: 'NotoSansHans-Regular';
margin:0;
}
.leftword,.rightword{
width:100%;
background-color: #F6F6F6;
height: 22em;
font-size: 14px;
font-family: 'NotoSansHans-DemiLight';
color:#1E249B;
}
.word{ margin-left: 20px;
width:70%;
margin-top:12px;
margin-bottom:12px;
float: left;
}
.word > p{
margin:0;
overflow: hidden;
text-overflow: ellipsis;
}
a{
margin:0;
color:#1E249B;
}
.time{
width:25%;
margin-top:12px;
margin-bottom:12px;
float: right;
}
.leftmore,.rightmore{
margin-left:75%;
}
</style>
</head>
<body>
<aside>
<div class="container">
<div class="row one clearfix">
<div class="col-lg-6 col-md-12 col-ms-12 col-xs-12">
<div class="left" ><span>通知公告</span></div>
<div class="leftword">
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
</div>
<div class="leftmore"><a href="#">更多</a></div>
</div>
<div class="col-lg-6 col-md-12 col-ms-12 col-xs-12">
<div class="right"><span>传媒新闻</span></div>
<div class="rightword">
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
<div class="leftcon"><div class="word" id=""><p><a href="#">传媒与艺术学院成功举办青年教师授课比赛</a></p></div><div class="time" id=""><a href="#">10-21</a></div></div>
</div>
<div class="rightmore"><a href="#">更多</a></div>
</div>
</div>
</div>
</aside>
<footer>
<div class="container">
<p>仙林校区地址：南京市亚东新城区文苑路9号 邮编：210023 三牌楼校区地址：南京市新模范马路66号 邮编：210003 锁金村校区地址：南京市龙蟠路177号 邮编：210042</p>
</div>
</footer>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星