3

目前正在做一个网络项目，我想在我的网站上设置一个可以随时使用的粘性部分。我尝试了不同的东西，但没有任何效果。

我的结构如下

<body>
  <wrap>
    <header></header>
    <nav></nav>
    <container></container>
  </wrap>
  <footer></footer>
</body>

如果你喜欢一个方案，这是这个链接： http ://s21.postimg.org/79tp8wu5z/structure_page.png

所以我想让我的标题导航和背景（应用于正文背景）粘在页面顶部。

我知道我需要使用固定的相对位置，但除了背景没有任何作用。

这是我的CSS：

body {
  background: url(img/bg.jpg) no-repeat center center;
  background-attachment: fixed;
  background-position: top;
}

.wrap {
  width: 960px;
  margin: 0 auto;
}

#header {
  height: 121px;
  position: relative;
}

#footer {
  height: 40px;
  background-color: #146992;
  position: relative;
}

.container {
  position:relative;
}

#menu {
  position:relative;
  height: 45px;
}

谢谢你的帮助。

4

3 回答 3

11

你还没有固定nav酒吧的位置。尝试使用

#nav
 {
 background-color:#262626;
 width:100%;
 height:50px;
 box-shadow: 0px 1px 50px #5E5E5E;
 position:fixed;
 top:0px;
}

或者你可以使用Twitter Bootstrap来启动。

看看这里和这里。

于 2013-06-07T09:17:44.450 回答
8

我自己一直在研究这个问题。我见过很多解决方案，每个解决方案都有问题，通常涉及一些神奇的数字。

因此，使用来自各种来源的最佳实践，我想出了一个解决方案：

我想在这里特别实现的是让主要内容在绿色区域内的页脚和页眉之间滚动。

这是带有源代码的工作演示： 

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header {
    height: 4em;
    background-color:red;
    position:relative;
    z-index:1;
}
.content {
    background:white;
    position:absolute;
    top:5em;
    bottom:5em;
    overflow:auto;
}
.contentinner {

}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background:green;
    position:relative;
    overflow:auto;
}
footer {
    height: 2em;
    position:relative;
    z-index:1;
    background-color:yellow;
}
<header>Header Strip</header>
<div class="container">
    <div class="content">
    <div class="contentinner">
            <p>THIS IS WHERE THE CONTENT GOES</p>
            <p><a href="http://traceyspencer.blogspot.co.uk/2012/04/css-sticky-header-and-footer-with.html" target="_blank">CLICK HERE for an explanation of this page</a>.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus nibh, bibendum sit amet porttitor ut, pretium id lectus. Nulla facilisis erat vel nisi malesuada consequat. Phasellus ac porta enim. Aliquam feugiat, lacus ornare fringilla sodales, neque arcu ultricies lorem, vel rhoncus lacus purus eu est. Proin sodales suscipit elit, ut consectetur erat faucibus a. Integer gravida, odio sed pellentesque cursus, lorem mi gravida nisi, vel consequat leo turpis vel leo. Vestibulum ac purus quam. Donec imperdiet varius mollis. Aliquam adipiscing magna vitae ipsum aliquam blandit. Morbi lectus purus, tempor vitae laoreet eu, sollicitudin sit amet magna.</p>
            <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
            <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
            <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p>
            <p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
            <p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
            <p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p></div>
    </div>
</div>
<footer>This is the footer</footer>

于 2013-09-26T17:06:25.737 回答
0

如果您创建响应式网站，请不要使用固定位置。因为它会在 Webkit 浏览器和 iPhone 和 iPad 中产生问题。我个人建议您使用Page Scroller这可以帮助您轻松流畅地滚动客户端。

于 2013-06-07T10:03:44.037 回答