Question

I m 设计一个网站,在固定主编外边定点。该中心为内容保留了一块。

当用户浏览时,我想到所有内容(除了指固定的外,还指固定的外在导航要素)都留在该中心的边境之内。

Here s a quick mockup of what I mean:

我非常容易地将中心部分的溢出财产放到汽车中,而且一切都留在车内。然而,非常重要的是,不应在这一要素的边缘出现滚动条。

基本上,我想知道如何做到:

Restrict content to that area (perhaps I could change the size and positioning of the body element -- is that allowed? -- and then position the fixed elements outside of the body.
Hide the scroll bar that appears inside the div when using overflow:auto

任何帮助都将受到高度赞赏。

Answer 1

如有可能,你应将固定职位要素分成4个单独的部分(顶、左、右和底层)。然后,确保你根据各自的宽度和高度把内容放在中心位置上,这样内容就会重叠:

<><><><>>><>>>>><>>>>>>

<!-- 4 fixed position elements that will overlap your content -->
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>

<div id="content">
  <!-- Your content -->
</div>

<>CSS

html, body {
  height: 100%;   
}

#top, #left, #right, #bottom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  background: red;
}

#top, #bottom {
  width: 100%;
  height: 20px;
}

#bottom {
  top: auto;
  bottom: 0;
}

#left, #right {
  height: 100%;
  width: 20px;
}

#right {
  left: auto;
  right: 0;
}

#content {
  position: relative;
  z-index: 1;
  padding: 25px; /* prevent content from being overlapped */
}

可查阅。

还注意到立场:内容领域的相对立场。这一点是正确的z-index,其内容在固定栏目下显示。

如果你注意IE6/7支持的话,你需要增加一个 rel=“noreferer”>CSS表示固定,以便在awesome浏览器上适当开展工作。

友情链接