0
嗨我很新的HTML和CSS，并遇到了一个问题，我似乎无法找到解决方案的任何地方。我已经问网络设计的朋友谁也困惑，我希望有人在那里可以协助。如何锁定或修复最后一个图像或div时滚动到浏览器顶部的指定点？
此链接到项目页面我的工作：http://dl.dropbox.com/u/25715164/project01.html
我碰到与如何，直到页面上的最后一个div略低于标题对齐限制滚动一个大问题。目前，当通过浏览器窗口查看填充屏幕边缘时，第二张图像正好在标题行下面对齐。然而，当你开始缩放浏览器窗口时，divs不能正确排列，要么在标题和图像之间留下一个奇怪的巨大差距，要么图像远远超出屏幕的顶部。如果你按照链接，你会希望看到我的意思？
我试着玩边缘，填充，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;
}
}
感谢您的快速响应。我完全明白你的意思，我打算让头部有白色背景，但问题是无法看到图像经过它。我试图确保所有内容的最后一张图片不能滚动到标题之外; - 因此，当您到达页面的底部时，它将完全对齐在可视区域内。这有意义吗？ – BP2012 2012-08-06 20:39:08
我明白你想要做什么，但是有太多变数在起作用。如果客户端的视口小于图像会怎么样？它变得非常棘手。 – MrDCGN 2012-08-06 20:48:14
好吧，我收到了关于浏览器高度的说法，并且很抱歉地将其更多地绘制出来。但是关于维基百科，以及如果用户点击维基百科上的 – BP2012 2012-08-06 21:12:56