粉红色的内容会在它后面。我设法创建了它，但需要通过 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);
}
最佳答案
如果我没理解错的话，你想要的基本上是整个页面覆盖。
这是一个如何使用 CSS 制作的示例。 A working example on 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 元素作为包含 block 。它只跨越视口(viewport)的大小。有一些方法可以让它一直向下延伸到页面底部，只需让 body 成为叠加层的包含 block 就更容易了。将 position 更改为 relative 正是这样做的。
更新:原来没有例子。您需要四个元素来复制它，但我描述的技术仍然适用。只有一个元素，您可以在视觉上复制它，它会覆盖内容，用户将无法选择它或单击链接或以任何其他方式进行交互。
关于javascript - 如何仅在 CSS 中创建具有绝对顶部和底部以及固定边的边框？包括图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17819460/