所以我一直在努力提高我的网站创建技能，并且正在阅读有关 html/css 开发的各种教程。我现在遇到的问题是，当我改变页面大小时， View 会发生难以置信的改变。我假设当 View 改变时它会保持它的结构但有一个较小的 View 窗口(不是这种情况)。
问题出在我使用百分比值而不是像素吗？有没有更好的方法来构建我的设计，使其响应窗口大小的变化？
这是我的HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li>
<a href="#">Services <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#"> Option 1</a></li>
<li><a href="#"> Option 2</a></li>
<li><a href="#"> Option 3</a></li>
</ul>
</li>
<li>
<a href="#"> Services2 <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#"> Option 1</a></li>
<li><a href="#"> Option 2</a></li>
<li><a href="#"> Option 3</a></li>
</ul>
</li>
<li><a href="#"> Contact Us</a></li>
<li><a href="3"> Site Map</a></li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
这是我的 style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
我想声明我使用了 Seb Kay 提供的下拉菜单。他的网站:http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css .我只是将此作为引用，以便他至少因其工艺而得到认可。
最佳答案
您的问题来自您的 css 中的垂直边距和填充规则。这有点违反直觉，但是这条规则，当用百分比定义时，不会将高度作为引用，而是将宽度作为引用，因此所有 4 个边距都是相等的。例子: 如果您有: margin: 5%，上边距和左边距是相同的，并且它们不依赖于顶部和底部边距的容器高度以及右侧和左侧的宽度。 对于填充，它是相同的。
所以，我的解决方案:如果您真的不需要百分比布局，我建议您使用 ems 作为垂直边距和填充。否则，如果需要保持比例，可以使用 vh 单位。 vh 单位 就像一个百分比，它指的不是父级的高度而是窗口的高度，因此在您需要时保持页面上的比例非常好避免滚动并保持百分比。
关于html - 网站格式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30093408/