怎样设置才能放大和缩小都不影响布局？

在放大情况下，header和banner最左边会留白的原因是什么？怎么解决？

例如像慕课网首页这里

Elvis_T 2019-02-16

源自：HTML5网页布局 2-3 html5页面布局（表现层_banner）

收起

3回答

卡布琦诺回答被采纳获得+3积分 2019-02-18 11:34:04

测试了同学的代码，并没有复现同学描述的情况。或者同学再具体、详细的描述一下。

收起回答

提问者 Elvis_T 2019-02-17 14:56:54

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<a href="index.html"><img src="images/logo.png"></a>
<nav>
<a class="Home" href="index.html">Home</a>
<a class="Course" href="#">Course</a>
<a class="Actual" href="#">Actual</a>
<a class="Plan" href="#">Plan</a>
<a class="FAQ" href="#">FAQ</a>
<a class="Notes" href="#">Notes</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="active"><img src="images/banner/banner1.jpg"></li>
<li class="left"><img src="images/banner/banner3.jpg"></li>
<li class="right"><img src="images/banner/banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>Recent<samp>Course</samp></h1>
<dl>
<dt>Hyper Text Markup Language</dt>
<dd><img src="images/Course/05_05.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
<dl>
<dt>Cascading Style Sheets</dt>
<dd><img src="images/Course/06_04.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
<dl>
<dt>JavaScript</dt>
<dd><img src="images/Course/09_07.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
<dl>
<dt>AngularJS</dt>
<dd><img src="images/Course/02_09.png"></dd>
<dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language.
AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
</dl>
</aside>
<article>
<h1>Welcome to Massive Open Online Course!</h1>
<p>We provide the latest knowledge to help you cope with the changing world!</p>
<img src="images/article.jpg">
<p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
<p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
</article>
</section>
<footer>
<div class="container">
<p class="left">Copyright © 2016 imooc.com All Rights Reserved.</p>
<span class="right">
<a href="#"><img src="images/icon/weichat.png"></a>
<a href="#"><img src="images/icon/sina.png"></a>
<a href="#"><img src="images/icon/qq.png"></a>
</span>
</div>
</footer>

</body>
</html>

*{
	margin:0;
	padding: 0;
	font-family: Arial;
	font-size: 14px;
	border: none;
}
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
header {
	background:#000;
	height: 80px;
	min-width: 1200px;
}
header > .container{
	width: 1000px;
	margin: 0 auto;
}
header > .container >a {
	display: block;
	float: left;
	margin: 5px 25px;
}
header > .container > nav{
	float: right;
}
header > .container >nav >a{
	font-size: 24px;
	line-height: 73px;
	display: block;
	float: left;
	width: 110px;
	height: 73px;
	text-align: center;
	color: #FFF;
}
header > .container > nav > a.Home{background:#433b90;}
header > .container > nav > a.Course{background:#017fcb}
header > .container > nav > a.Actual{background:#786917;}
header > .container > nav > a.Plan{background:#feb800;}
header > .container > nav > a.FAQ{background:#f27c01;}
header > .container > nav > a.Notes{background:#d40112;}
header > .container > nav > a:hover,
header > .container > nav > a.active{padding-bottom: 3px;padding-top: 4px;}


/*banner*/

.banner{
	background:#eaeaea;
	min-width: 1200px;
}
.banner > ul{
	position:relative;
	width:1000px;
	height: 538px;
	margin: 0 auto;
	padding-top: 10px;
}
.banner > ul > li{
	position:absolute; 
	width:510px;
	height: 300px;
	overflow: hidden;
}
.banner > ul > li.active{
	z-index: 2;
	top: 0px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 600px;
	height: 400px;
	margin: auto;
	border: 1px solid #FFF;
}
.banner > ul > li.left{
	z-index: 1;
	top: 0;
	bottom:0;
	left: 0;
	margin: auto; 
}
.banner >ul > li.right{
	z-index: 1;
	top: 0;
	right: 0;
	bottom:0;
	margin: auto; 
}
.banner > ul > li > img{
	position: absolute;
	height: 100%;
	left: -30%;
}


/*footer*/
footer{
	min-width: 1000px;
	background: #CCC;
}
footer > .container{
	width:1000px;
	margin: 0 auto;
}
footer > .container > p{
	display: block;
	float: left;
}
footer > .container > p.left{
	top: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
}
footer > .container > span{
	float: right;
}

目前的代码，Ctrl+滚轮后的内容，因为慕课首页的头部放大和缩小都不会影响布局，那么应该是有一种方法可以使整个body整体按比列放大或者缩小才是吧

收起回答

卡布琦诺 2019-02-17 13:21:27

目前可以给header、footer和页面主体内容的整体父元素设置min-widht最小宽度，即让页面缩小到一定程度便不再缩小（建议设置min-width在1200及以上）。

希望可以帮到你！

收起回答

提问者 Elvis_T #1

目前我所做的改动最多可以是无限缩小也能不打破布局（不会左移或者右移，依旧整体居中），只有在无限放大出现滚动条的时候才会出现内容偏移，我想知道怎么样：放大和缩小都不会使内容脱离盒子

2019-02-17 13:40:11
卡布琦诺回复提问者 Elvis_T #2

同学所说的放大具体指的是什么？是调整浏览器的窗口，还是按住ctrl+放大了页面的内容呢？建议同学将html、css代码贴上来，老师帮你看一下具体问题。

2019-02-17 13:44:33