圣杯布局编程练习中窗口宽度手动缩小两边的背景变为白色是怎么回事？
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局实例</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
body{min-width: 800px;}
.header,.footer{background-color: #000;height: 60px;line-height: 60px; color: #fff; word-spacing:1.5em;}
.header{text-align: right;padding-right: 3em; }
.footer{text-align: center;}
.container{padding: 0 300px 0 300px;height: 800px;}
/*圣杯布局核心*/
.left,.middle,.right{
position: relative;
float: left;
min-height: 800px;
}
.middle{
width: 100%;
background-color: #1a5acd;
}
.left{
width: 300px;
background-color: #f00;
margin-left: -100%;
left: -300px;
}
.right{
width: 300px;
background-color: #30a457;
margin-right: -300px;
}
img{width: 40%;height: 40%;}
.boxM{text-align: center;line-height: 800px; }
.boxL{ margin-top: 200px; line-height: 4em;min-width: 300px; }
.ltit{ background-color: pink; }
.boxR{margin-top: 70%;margin-left: 25%;min-width: 300px;line-height: 2em;}
.login{background-color: red;color: #fff;text-align: center;margin-left: 60px;padding: 5px 8px;}
</style>
</head>
<body>
<!--头部标题-->
<div class="header">
<span class="tit">课程</span>
<span class="tit">职业路径</span>
<span class="tit">实战</span>
<span class="tit">猿问</span>
<span class="tit">手记</span>
</div>
<!--页面主体-->
<div class="container">
<!--圣杯布局中间-->
<div class="middle">
<div class="boxM">
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" />
</div>
</div>
<!--圣杯布局左-->
<div class="left">
<div class="boxL">
<h3>课程推荐</h3>
<p><span class="ltit">职业路径</span> HTML5与Css3实现动态网页</p>
<p><span class="ltit">职业路径</span> 零基础入门Android语法与界面</p>
<p><span class="ltit">职业路径</span> iOS基础语法与常用控件</p>
<p><span class="ltit">职业路径</span> PHP入门开发</p>
<p><span class="ltit">职业路径</span> JAVA入门开发</p>
</div>
</div>
<!--圣杯布局右-->
<div class="right">
<div class="boxR">
<h3>登录</h3>
<p class="input"><input type="text" placeholder="请输入登录邮箱/手机号" size="20"></p>
<P class="input"><input type="password" placeholder="6-16位密码，区分大小写，不能用空格" size="20"></P>
<p class="log"><span class="login">登录</span></p>
</div>
</div>
</div>
<!--尾部-->
<div class="footer">
<span class="bottom">网站首页</span>
<span class="bottom">企业合作</span>
<span class="bottom">人才招聘</span>
<span class="bottom">联系我们</span>
<span class="bottom">常见问题</span>
<span class="bottom">友情链接</span>
</div>
</body>
</html>
正在回答
因为页面的宽度不够，你的页面中，左侧宽度是300，中间00，右侧是300，加起来最小宽度是900，但是你的页面min-width是800px。
也就是说，当页面的宽度小于等于800px时，页面元素不会再有相应的变化，但是页面元素的宽度超过了800，所以元素会往下移动，显示出页面的白色背景，将最小宽度改为大于900就可以了。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星