3

在此处输入图像描述

粉红色的内容将在它后面。我设法创建了这个，但需要通过 javascript 扩展高度。窗口调整大小、滚动等是我可以让两侧一直向下连接到底部的唯一方法。我根本不想使用 JS。有任何想法吗？

添加了我到目前为止所拥有的：jsFiddle

CSS：

body {
    background: #FF3300;
}
.border-top {
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    right:0;
    left:0;
    margin: 20px 20px 0 20px;
    border-top: 5px solid #d3ad42;
    background: none;
    pointer-events: none;
}
.border-right {
    margin: 20px 20px 20px 0;
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    right:0;
    bottom: 0;
    border-right: 5px solid #d3ad42;
    pointer-events: none;
}
.border-bottom {
    display: block;
    z-index: 10;
    position: fixed;
    height: 20px;
    bottom:0;
    right:0;
    left:0;
    margin: 0 20px 0 20px;
    border-top: 5px solid #d3ad42;
    background: inherit;
    pointer-events: none;
}
.border-left {
    margin: 20px 0 20px 20px;
    display: block;
    z-index: 10;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    border-left: 5px solid #d3ad42;
    pointer-events: none;
}
.content {
    padding: 40px;
    min-height: 1400px;
}

JS：

var WIDTH, HEIGHT, SCROLL;

document.addEventListener("scroll", resize, false);

function resize() {
    HEIGHT = $(window).height();
    WIDTH = $(window).width();
    SCROLL = $(document).scrollTop();

    // BORDER
    $('.border-left').height(HEIGHT + SCROLL - parseInt($('.border-left').css('margin-top'), 10) * 2);
    $('.border-right').height(HEIGHT + SCROLL - parseInt($('.border-right').css('margin-top'), 10) * 2);
}
4

1 回答 1

1

如果我理解正确，您想要的基本上是整个页面覆盖。

这是一个如何使用 CSS 制作的示例。JSFiddle 上的一个工作示例。

HTML（最小）：

<html>
  <body>
    <div id="overlay">Hello!</div>
  </body>
</html>

CSS：

body { position: relative }

#overlay {
  position: absolute;
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

我想，稍微解释一下不会有什么坏处。#overlay是您想要覆盖整个页面的元素。它的风格非常简单。您使其绝对定位并将其侧面锚定到页面的侧面。

现在，仅此还不够。您已经注意到它不会覆盖整个页面。只有折叠前的部分。这是为什么？这是因为默认情况下#overlay会将html元素作为包含块。它只跨越视口的大小。有一些方法可以让它一直延伸到页面的底部，它更容易body成为覆盖的包含块。而更改position为relative正是这样做的。

更新：最初没有例子。你需要四个元素来复制它，但我描述的技术仍然适用。只需一个元素，您就可以在视觉上复制它，它将覆盖内容，用户将无法选择它或单击链接或以任何其他方式进行交互。

于 2013-07-23T20:48:02.330 回答