嗨，我对 html 和 CSS 很陌生，遇到了一个问题，我似乎无法在任何地方找到解决方案。我问过同样困惑的网页设计朋友，希望有人能提供帮助。
此链接将您带到我正在处理的项目页面：http: //dl.dropbox.com/u/25715164/project01.html
我遇到了一个巨大的问题，即如何限制滚动，直到页面上的最后一个 div 与标题下方对齐。目前，当通过填充屏幕边缘的浏览器窗口查看时，它可以正常工作，第二张图像正好在标题行下方对齐。但是，当您开始缩放浏览器窗口时，div 没有正确排列，并且在标题和图像之间留下一个奇怪的大间隙，或者图像太远超出屏幕顶部。如果你按照链接，你会希望看到我的意思？
我已经尝试过使用边距、填充、div 高度，并且正在考虑最后一张图片是否是页脚，但我没有设法破解它！
我认为这可能很简单，因为页面应该在顶部包含一个固定的 div 标题，然后内容会滚动，直到最终图像的顶部距离浏览器窗口顶部大约 30px，此时滚动将被禁用- 我完全被难住了，您能提供的任何帮助将不胜感激。html 和外部 CSS 复制如下。[我使用dreamweaver cs6的新液体布局开始这个网站，但缩放有点小故障，经过大量研究建议通常指向一个固定的像素相对定位的容器div，以页面为中心，里面有绝对定位的div]
提前致谢。
/* html */
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do the following if you're using your customized build of modernizr (http://www.modernizr.com/):
* insert the link to your js here
* remove the link below to the html5shiv
* add the "no-js" class to the html tags at the top
* you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build
-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="fixedtop1">
<div id="center250a">
<div id="SiteHeadingPortfolio_test">PORTFOLIO</div>
<div id="SiteHeaderPSIdesign_test"> : PRODUCT / SERVICE / INTERACTION DESIGN</div>
<div id="HorizontalRule_test"><hr></div>
</div>
</div>
<div class="project01_wrap"><img src="images/test.png"></div>
<div class="project02_wrap"><img src="images/test.png"></div>
</div>
<p> </p>
</body>
</html>
/* CSS CODE */
@charset "UTF-8";
@import url("webfonts/Ben_Sans_Bold/stylesheet.css");
@import url("webfonts/Ben_Sans_Regular/stylesheet.css");
@import url("webfonts/Ben_Sans_Light/stylesheet.css");
@import url("webfonts/Ben_Sans_RegularItalic/stylesheet.css");
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}
/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 4;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 20;
Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/
/* Mobile Layout: 480px and below. */
.gridContainer {
width: 370px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 480px) {
.gridContainer {
width: 1000px;
max-width: 1000px;
padding-left: 0;
padding-right: 0;
padding-top: 10px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
left: 0px;
top: 0px;
}
#SiteHeadingPortfolio {
width: 78px;
display: block;
font-family: "Ben Sans Bold";
font-size: 11.5px;
font-weight: bold;
letter-spacing: 1px;
left: 10px;
top: 10px;
position: absolute;
}
body {
text-align: center;
}
.SiteHeaderPSIdesign {
margin-top: 2px;
font-family: "Ben Sans Regular";
font-size: 10px;
font-weight: normal;
position: absolute;
width: 350px;
left: 38px;
letter-spacing: 1px;
top: 9px;
}
.HorizontalRule {
left: 10px;
top: 22px;
height: 0px;
width: 980px;
position: absolute;
font-family: "Ben Sans Regular";
font-size: 5px;
letter-spacing: 2px;
}
.button_01 {
position: absolute;
height: 185px;
width: 173px;
left: 15px;
top: 38px;
}
.button_image {
position: absolute;
height: 131px;
width: 173px;
}
.button_Title {
position: absolute;
width: 173px;
top: 135px;
font-family: "Ben Sans Regular";
font-size: 11px;
text-align: left;
}
.button_Text {
position: absolute;
width: 160px;
top: 149px;
font-family: "Ben Sans Regular";
font-size: 9px;
left: 15px;
text-align: left;
text-transform: uppercase;
color: #333;
line-height: 14px;
word-spacing: 1.5pt;
}
/* Project Page begins here - TESTING -. */
.project01_wrap {
width: 980px;
height: 670px;
position: absolute;
left: 10px;
top: 38px;
}
.project02_wrap {
width: 980px;
height: 764px;
position: absolute;
left: 10px;
top: 800px;
}
#fixedtop1 { position: fixed; top: 10px; left: 0; right: 0; border: none; z-index: 50; background-color: #FFFFFF; }
#center250a {
width: 980px;
margin: auto;
background-color: #FFFFFF;
}
#SiteHeadingPortfolio_test {
width: 78px;
display: block;
font-family: "Ben Sans Bold";
font-size: 11.5px;
font-weight: bold;
letter-spacing: 1px;
position: absolute;
}
#SiteHeaderPSIdesign_test {
margin-left: 28px;
margin-top: 1.5px;
font-family: "Ben Sans Regular";
font-size: 10px;
font-weight: normal;
position: absolute;
width: 350px;
letter-spacing: 1px;
}
#HorizontalRule_test {
margin-left: 0px;
top: 12px;
height: 0px;
width: 980px;
position: absolute;
font-family: "Ben Sans Regular";
font-size: 5px;
letter-spacing: 2px;
}
}