我设计一个网站，我的父亲，至今我只是中途的索引页。 什么是缠着我，当我缩小到30％左右（只是为了测试的缘故）的div被打破，他们最终出来的地方（会告诉你一个例子）。 甚至还有的div不留一个“全实体”
我试图基本上一切，所述最小宽度（这是965px）。 有没有办法让它围捕明智之类的百分比是多少？ 如果是这样，怎么能进行考虑到最大宽度，宽度必须965px？
我的网站主要是为个人电脑。
另外我使用HTML5和CSS3
有这使整个身体成一个“盒子”，一个外层div
警告：我的头是在PHP这样是页脚，然后我只是加载它们。 我将张贴同时header.php文件和generalbackground CSS
CSS代码是这样的：
@charset "utf-8";
/* CSS Document */
body
{
background:url(pics/bg.jpg) no-repeat center center fixed;
background-color:#282828;
font-family: 'Sancreek', cursive;
min-width:965px;
margin: 0 auto;
}
.bodyoutline
{
min-width:100% ;
}
div.upperbody
{
background:url('pics/topbg.png') no-repeat center center;
width:965px;
height:100px;
margin: 0 auto;
}
div.body
{
background:url('pics/divbg.png') no-repeat center center fixed;
width:965px;
height:1304px;
margin: 0 auto;
margin-top:-25px;
}
div.header
{
background:url('pics/header.png');
width:965px;
margin: 0 auto;
height: 319px;
overflow:hidden;
}
div.logo
{
background:url('pics/logo.png');
width: 220px;
height: 215px;
float:left;
margin-left:20px;
margin-top:20px;
}
div.groupPhoto
{
background:url('pics/group.png');
float:right;
margin-right:30px;
width:552px;
height:244px;
margin-top:30px;
transform: rotate(12deg);
-ms-transform: rotate(12deg); /* IE 9 */
-webkit-transform: rotate(12deg); /* Safari and Chrome */
}
div.mainContent
{
width:965px;
margin: 0 auto;
float:left;
}
div.menuLinks
{
width:965px;
margin: 0 auto;
text-align:center;
}
ul,li.menuLinks
{
width:965px;
margin: 0 auto;
display:inline;
font-size: 38px;
padding: 10px;
color: #39100a;
font-weight:bold;
}
div.separator
{
width:965px;
text-align:center;
margin:0 auto;
height:50px;
}
div.box
{
width:965px;
margin: 0 auto;
}
div.updec
{
background:url('pics/updec.png') center no-repeat;
width: 965px;
height: 202px;
}
h1.titles
{
margin-left:75px;
font-size:30px;
}
h1.ePhotos
{
float:left;
font-size:18px;
text-decoration:underline;
margin-left:25px;
}
.position
{
margin-left:90px;
margin-top:-130px;
}
a:visited
{
text-decoration:none;
color:#000;
}
a:hover
{
text-outline:#000;
outline-color:#000;
outline-width:2px;
margin: 0 auto;
}
header.php文件
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">
<div class="header"> <!-- Header containing Logo and Group Photo -->
<div class="logo"></div> <!-- Logo -->
<div class="groupPhoto"></div> <!-- end of groupPhoto -->
</div> <!--End of header -->
<div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->
<div class="menuLinks"> <!-- Menu Links -->
<ul class="menuLinks">
<li class="menuLinks"><a href="index.php">Home</a></li>
<li class="menuLinks"><a href="about.php">About</a></li>
<li class="menuLinks"><a href="dances.php">Dances</a></li>
<li class="menuLinks"><a href="videos.php"> Videos </a></li>
<li class="menuLinks"><a href="events.php">Events </a></li>
<li class="menuLinks"><a href="contact.php">Contact</a></li>
</ul>
</div> <!-- end of mainContent -->
缩小到30％的结果
http://imageshack.us/photo/my-images/571/y1bw.jpg/
PS：浏览器目前正在测试使用Google Chrome浏览器：版本29.0.1547.66米
谢谢
