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