背景
我试图设计一个具有固定标题但页面其余部分水平滚动的网站。水平滚动部分将仅包含一组 6 张图像。标题将由网页名称和导航栏组成。
问题
我知道我需要使用 CSS 属性 Position:Fixed; 设置 header ，我已经这样做了并且按预期工作。
问题是页面的其余部分，我不确定要设置照片所在的 div“Photoframe”的哪些属性。div“Photoframe”的宽度需要根据照片的尺寸进行动态调整上传新照片时会发生变化。
到目前为止我有什么
我有一个“间隔”，它设置了标题的高度和 100% 的宽度。这是为了防止相框出现在标题下方。有点管用。然而，当用户垂直滚动页面时，“photoframe”会上下移动并忽略间隔符。
HTML
<body>
<div id="Header">
<header>
<div class="title">
<h1>Bass Clef Photography</h1>
</div>
<div class="tagline">Passion 4 Live Music & Passion 4 Photography</div>
</header>
<div id="tabsContainer">
<div class='tab zero'>
<ul>
<li><a href="BassClef.html">Home</a></li>
</ul>
</div>
<div class='tab one'>
<ul>
<li><a href="#">Music Gallery</a></li>
</ul>
</div>
<div class='tab two'>
<ul>
<li><a href="#">About</a></li>
</ul>
</div>
<div class='tab three'>
<ul>
<li><a href="#">Clients</a></li>
</ul>
</div>
<div class='tab four'>
<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class='tab five'>
<ul>
<li><a href="members.php">Members</a></li>
</ul>
</div>
</div>
</div>
<div class="spacer"></div>
<div id="photoframe">
<div class="pics"> <img src="uploads/picture01.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture02.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture03.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture04.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture05.jpg" alt=""></div>
<div class="pics"> <img src="uploads/picture06.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture07.jpg" alt=""></div>
<div class="pics"><img src="uploads/picture08.jpg" alt=""></div>
</div>
</div>
</body>
CSS
@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
*, :before, :after {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End of CSS reset*/
a:link {
color: #FFF;
text-decoration: none;
} /* unvisited link */
a:visited {
color: #FFF;
text-decoration: none;
} /* visited link */
a:hover {
color: #FFF;
text-decoration: none;
} /* mouse over link */
a:active {
color: #030303;
text-decoration: none;
font-size: 100%;
} /* selected link */
#Header{
position: fixed;
top: 0px;
left: 0px;
float: left;
}
.spacer
{
height: 300px;
width: 100%;
}
body{
background-color:#424242;
}
.title{
font-size: 6em;
color: #FFF;
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10px;
}
.tagline{
font-size: 3em;
color: #d3701e;
margin-left: 30px;
}
#tabsContainer {
position: relative;
height: 50px;
width: 450px;
margin-left: auto;
margin-right: auto;
}
#tabsContainer {
height: 50px;
width: auto;
padding-left: 30px;
font-size: 24px;
}
#tabsContainer ul {
list-style: none;
margin: 0;
padding: 0;
font-size:24px;
}
#tabsContainer ul li {
display: inline;
margin: 0px;
display: block;
height: 50px;
text-align: center;
line-height: 30px;
font-size:24px;
}
#tabsContainer ul li a {
height: 33px;
display: block;
float: left;
padding: 17px 15px 0 15px;
font: bold 12px Arial;
color: #FFF;
text-decoration: none;
font-size:24px;
}
#tabsContainer ul li a:hover {
color: #d3701e;
height: 50px;
font-size: 24px;
}
#tabsContainer ul li#active a {
color: #d3701e;
background: url(images/navigation-hover.png) repeat-x left top;
font-size:24px;
}
.tab{
float: left;
font-size:24px;
}
.tab.one
{
width:190px;
font-size:24px;
}
#photoframe
{
position: absolute;
padding: 0 25px 0 25px;
overflow: visible;
white-space: nowrap;
left: 0px;
}
#photoframe .pics
{
margin: 0 5px 0 5px;
display: inline-block;
position: relative;
overflow: hidden;
}
#photoframe .pics img {
padding: 0;
margin: 0;
z-index: 1;
display:inline-block;
}
.upload
{
float: left;
vertical-align: baseline;
}
最佳答案
您需要将 top:380px 添加到 #photoframe，这将解决问题。
关于html - 如何设置带有水平滚动页面的固定页眉？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23436041/