javascript - How would I create a border with an absolute top and bottom, and fixed sides in CSS only? Image included -
the content in pink behind it. managed create needed extend height via javascript. window resize, onscroll, etc way sides go way down connect bottom. i'd not use js @ all. ideas?
added have far: 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); }
if understood correctly, want whole page overlay.
here's example of how make 1 css. a working example on jsfiddle.
html (minimal):
<html> <body> <div id="overlay">hello!</div> </body> </html> css:
body { position: relative } #overlay { position: absolute; top: 30px; bottom: 30px; left: 30px; right: 30px; } a bit of explanation wouldn't hurt, guess. #overlay element want make cover whole page. style pretty straight forward. make absolutely positioned , anchor sides sides of page.
now, not enough. you've noticed won't cover whole page. part before fold. why that? that's because default #overlay have html element containing block. spans size of viewport. there ways make span way down bottom of page it's easier make body containing block overlay. , changing position relative that.
update: there no example. you'd need 4 elements replicate technique described still applicable. 1 element can replicate visually bit cover content , users unable select or click links or interact in other way.
Comments
Post a Comment