我有两个框需要锁定在这个网页上，但是当我尝试锁定它们时，它会改变大小并且正文会滚动到它上面。
我需要标题来显示所有内容并被锁定。
代码在这里:
http://jsfiddle.net/dwhs/gtehep16/
HTML
<body>
<!--==============================header=================================-->
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2"><a href="#">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span></span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
</span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id='cssmenu'>
<ul>
<li class='active'><a href='/'><span>Home</span></a></li>
<li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
<li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
<li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
<li><span><a href="/support.htm">Support</a></span></li>
<li><a href='/affiliates/index.htm'><span>Affiliates</span></a></li>
<li class='last'><a href='/why-us.html'><span>Why us</span></a></li>
</ul>
</div>
CSS
header {
width:100%;
position:relative;
z-index:2;
}
.logo {
display:block;
width:300px;
height:75px;
text-indent:-5000px;
background:url(/images/logo.png) 0 0 no-repeat;
}
.nothing {
color: #ffffff;
font-size:20px;
text-decoration:none;
padding: 10px 0px 0px 0px;
}
.head-box1 {
padding-bottom:10px;
background-color: #F4F3F3;
}
.main {
width:960px;
padding:0;
margin:0 auto;
}
body{
color:#333;
position:relative;
min-width:980px;
font-family: Open Sans, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
text-transform: none;
background-color: #F4F3F3;
background-repeat: no-repeat;
background-position: center 0;
}
html,body{height:100%;}
p{padding-bottom:18px;}
a{
color:#333;
outline:none;
cursor:pointer;
text-decoration:none;
}
/*** MENU ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 5;
list-style: none;
}
nav {
float:right;
margin-right:10px;
padding-top:25px;
width:500px;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu li {
float: right;
position: relative;
margin-left:20px;
}
.sf-menu a {
display: block;
position: relative;
color:#CCCCCC;
text-transform:capitalize;
font-size:12px;
line-height:16px;
}
.sf-menu a:hover,
.sf-menu a.active,
.sf-menu li.sfHover > a {
color:#FFFFFF;
text-decoration:none;
}
.sf-menu ul a:hover,
.sf-menu ul li.sfHover > a {
color:#1f4460;
}
.sf-menu ul ul a:hover,
.sf-menu ul ul li.sfHover > a {
color:#58a5c4;
}
.sf-menu ul {
position: absolute;
top: -999em;
background:url(/images/menu-bg.gif) repeat-x 0 0 #4f95ba;
width: 160px; /* left offset of submenus need to match (see below) */
padding-top: 19px;
padding-right: 0;
padding-bottom: 8px;
padding-left: 0;
}
.sf-menu ul:after {
display:block;
position:absolute;
width:11px;
height:6px;
background:url(../images/marker1.png) no-repeat 0 0;
top:-6px;
left:14px;
content:' ';
}
.sf-menu ul ul:after {
display:block;
position:absolute;
width:5px;
height:9px;
background:url(../images/marker2.png) no-repeat 0 0;
top:13px;
left:-5px;
content:' ';
}
.sf-menu ul ul {
position: absolute;
top: -999em;
padding:10px 0 6px;
background:url(../images/menu-bg1.gif) repeat-x 0 0 #1e4460;
width: 140px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
margin:0 25 30px;
padding:20px 0 0px;
text-align:center;
}
.sf-menu ul a {
font-size:12px;
color:#fff;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: -17px;
top: 32px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 151px;
top: -8px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
}
页面在这里http://dwhswebsite.com试图锁定菜单及以上的所有内容。所以一切都在它下面滚动。
谢谢!
最佳答案
您的 HTML 标记有误。你的<header>包括你 body 的大部分内容。进行以下更改。
更新了 header HTML，其他所有内容都应低于 </header>
<header>
<div class="head-box1">
<div class="main">
<h1><a class="logo" href="index.html">pro web hosting</a></h1>
<nav>
<div style="text-align:right;"> <span class="link2"><a href="https://webhost.pro/account/clientarea.php">Account Manager</a> | <a href="https://webhost.pro/account/cart.php?a=view">Cart</a> | <a href="https://webhost.pro/account/register.php">Register</a> | <a href="http://webhost.pro/account/knowledgebase.php">Questions?</a></span><span class="phone"><br>
Call us: <strong>(213)984-HOST 24/7 <a href="/support.htm">Support</a></strong></span><span class="nothing"><br>
</span> <a href="https://webhost.pro/account/clientarea.php"></a></div>
</nav>
</div>
<div class="clear"></div>
</div>
<div id="cssmenu">
<ul>
<li class="active"><a href="/"><span>Home</span></a></li>
<li><span><a href="/web-hosting-plans.htm">Web Hosting</a></span></li>
<li><span><a href="/reseller-hosting.htm">Reseller</a></span></li>
<li><span><a href="/dedicated-servers.html">Dedicated</a></span></li>
<li><span><a href="/support.htm">Support</a></span></li>
<li><a href="/affiliates/index.htm"><span>Affiliates</span></a></li>
<li class="last"><a href="/why-us.html"><span>Why us</span></a></li>
</ul>
</div>
</header>
CSS
header {
width: 100%;
position: fixed;
z-index: 2;
}
body {
top: 150px;
}
关于css - 如何在此网页中锁定标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29356294/