如何在CSS中仅使用绝对上下边框和固定侧边创建边框？附带图片。

Question

如何在CSS中仅使用绝对上下边框和固定侧边创建边框？附带图片。

javascripthtmlcss

3

enter image description here

粉色区域将会在背景后面。我已经创建了这个效果，但需要通过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);
}

- Tom

calc，-webkit-calc等。 - dandavis

所以顶部和底部的边框会随着页面移动，但是侧边保持不动？ - isherwood

您可以使用div来创建此效果。但是，仅使用CSS中的一个包装器div是不可能的，因为包装器需要根据用户干预而改变高度。 - Kevin Lynch

你看过那个 jsfiddle 吗？它是 div 元素。我只是试图用纯 CSS 解决它。 - Tom

@Tom 在你的代码中，底部边框始终可见，但当你滚动时顶部会消失，这是你期望的行为吗？ - omma2289

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pointless One · Accepted Answer

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

以下是使用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 正好做到了这一点。

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