Responsive border sized to page not viewport - html

Question

I need a 4px thick solid border around my web page. 30px in from the edge. It needs to be responsive so if the website scrolls the border should always be 30px in from the edge of the PAGE not the VIEWPORT.
I'm trying to use div's positioned absolutely 30px in around the page with a 4px border. But this doesn't work for the footer as it doesn't stay at the bottom of the content when the page scrolls. Sometime the content won't fill the viewport so I can just have a border around the main content.
#main {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
}
#content2 {
background: #232C44;
color: white;
padding: 30px;
}
#b1 {
position: absolute;
left: 30px;
border-right: 4px solid #916E00;
top: 30px;
bottom: 30px;
}
#b2 {
position: absolute;
left: 30px;
border-bottom: 4px solid #916E00;
right: 30px;
top: 30px;
}
#b3 {
position: absolute;
top: 30px;
bottom: 30px;
border-left: 4px solid #916E00;
right: 30px;
}
#b4 {
position: absolute;
left: 30px;
border-top: 4px solid #916E00;
right: 30px;
bottom: 30px;
}
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
PART 2
Ok so we have some answers. I'd like to take this to a second stage which I need for my design.
I need two sections to the page TOP and BOTTOM. The colour of these bleeds past the border. How do I create this to the same spec as the first part of the question.
This is how it should look:
This is how it currently looks:
Don't worry about the width and height. How do I make all the top white and the bottom blue. Whilst still making it responsive. The bottom border always the same distance from the PAGE edge (no the viewport)? Even when the page needs to scroll.

Answer 1

I recommend adding the border to the body element. Please check the following
html, body {
min-height: calc(100vh - 68px);
}
body {
border: 4px solid #916E00;
margin: 30px;
}
#main {
padding: 0 10%;
}
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum accusamus possimus dolore iste aspernatur soluta quia ipsam perferendis magni, voluptatum libero ratione dignissimos cumque magnam rem quasi, at, explicabo eius?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt inventore libero illo laborum soluta modi nesciunt, iste minus, animi aliquid dolor, atque cumque vero fugiat hic amet ipsa exercitationem eum?</p>
<p>Cumque ab libero voluptatem iste. Adipisci omnis a est mollitia neque perspiciatis excepturi incidunt unde, eius tempora vel? Commodi voluptate minima numquam, aliquid veritatis laborum velit rerum cupiditate accusamus repudiandae!</p>
<p>Harum ab voluptate, id dolor autem minima nesciunt sunt aut in! Impedit in illum velit eligendi accusamus nostrum numquam maxime est, molestiae odit nam! Omnis illum ipsum reiciendis eligendi deserunt.</p>
<p>Tempora enim nisi cupiditate perferendis asperiores placeat incidunt iste neque hic aliquid quos aperiam, sint amet! Quaerat nisi mollitia, officiis quis voluptate dignissimos cumque illum, explicabo, velit consequuntur quos nobis.</p>
<p>Quas sed perferendis recusandae nesciunt asperiores nulla, eius dolores quisquam, blanditiis eaque ab illum perspiciatis ut. Reiciendis, at sunt explicabo esse dolores praesentium, unde maiores quibusdam porro perspiciatis repellendus fugit?</p>
<p>Et inventore a itaque recusandae nostrum sed, quod, quae ab, vero accusamus nihil esse explicabo fuga illum quas? Iure ducimus iusto totam consequuntur, accusamus illum optio nesciunt ipsam ipsa deleniti.</p>
</div>
This will keep the border aligned to the bottom of page if there isn't sufficient content to fill the viewport.
PART 2 solutions, using JS - comments included within snippet
var bottomMarginOffset = 90; //adjust as needed
function onResize() {
$('.row2').css('margin-top', $('.row1').height() + bottomMarginOffset + 'px');
}
$(function() {
// call resize on page load to set initial value
onResize();
});
$(window).resize(onResize)
* {
box-sizing: boder-box;
}
body {
background-color: #00b3ff;
padding: 0;
margin: 0;
}
#main {
min-height: calc(100vh - 68px);
border: 4px solid #916E00;
position: relative;
padding: 0;
margin: 30px;
}
/*
Set top row to absolute and offset it (margin + border width) so that it sits outside its container.
Recommend using some CSS vars to set and calculate the values.
*/
.row:nth-child(1) {
position: absolute;
top: 0;
left: 0;
right: -34px; /* stretch it outside on right side */
z-index: -1; /* stack under parent so the border stays on top */
margin-left: -34px; /* pull left */
margin-top: -34px; /* pull up */
padding: 64px 64px 34px; /* add padding so that content is aligned with the rest of the child elements */
}
.row:nth-child(2) {
padding: 30px;
}
.row:nth-child(odd) {
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="row row1"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae doloremque quaerat commodi consectetur quisquam similique, dignissimos tenetur, modi porro, cum voluptas expedita neque nisi dolorem sequi sed beatae? Repellendus, alias?</p>
<p>A ut nam quidem nobis obcaecati fuga sunt. Recusandae perspiciatis repellat vero? Nostrum, architecto commodi. Officiis quos cum dolore error enim adipisci deserunt, blanditiis autem fugiat laboriosam suscipit laborum hic!</p>
</div>
<div class="row row2"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, officia sequi facilis exercitationem vero error voluptatibus libero magnam ducimus explicabo commodi quos itaque quas consequatur dolores veniam nam excepturi autem.</p>
<p>Officiis ipsa quod dolores temporibus at porro corporis aut natus distinctio suscipit esse, nam soluta veniam earum quaerat laborum ab voluptatem voluptatibus laboriosam repellat quis. Labore aliquid illum cumque assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa odit non unde nesciunt illo qui dolorum autem ad minus quisquam nemo rem tenetur vero velit ab in, veritatis recusandae voluptatum?</p>
<p>Optio sunt inventore accusantium accusamus, eaque at voluptate libero fugit, ipsum impedit, modi labore autem molestiae. Porro tempora, corrupti, quo veritatis laudantium illum veniam nulla illo in quasi facere dolore?</p>
<p>Expedita exercitationem ipsam explicabo similique est omnis reiciendis. Natus non similique veritatis, reprehenderit, sed delectus quo at molestiae expedita placeat quis accusamus iure? Soluta natus vel asperiores dignissimos, laboriosam expedita!</p>
<p>Tempora doloribus neque dolores odio temporibus laboriosam nostrum, reiciendis suscipit provident cum officiis eaque culpa, quam est molestias minus enim harum adipisci autem expedita, laudantium quisquam ut nihil. Deserunt, voluptas.</p>
<p>Qui accusantium ut atque esse excepturi praesentium minima quos harum! Voluptas quibusdam alias incidunt similique facilis architecto, qui nulla, quas voluptates laudantium quis modi saepe suscipit. Inventore, aliquid. Minima, dolor.</p>
<p>Quidem, sunt facilis voluptates nihil neque doloremque deserunt? Magnam in adipisci ipsum voluptatem possimus quas mollitia, dicta soluta non magni praesentium ad ea. Dignissimos accusamus quaerat ab est. Magnam, asperiores!</p>
<p>Dolores, quo. Officiis hic adipisci nihil obcaecati voluptates incidunt sit eum dolorem quasi dignissimos vero ullam maxime harum laborum quis ab praesentium corporis quos, tenetur, omnis non ex error doloribus?</p>
<p>Officia, quisquam? Omnis unde reprehenderit, asperiores delectus quibusdam corrupti veniam dignissimos. Sunt natus ut illo aspernatur perspiciatis veritatis? Mollitia, eligendi aliquid. Natus, earum? Ipsam harum consequatur unde aliquid! Necessitatibus,
beatae!</p>
<p>Nostrum sunt quod consectetur debitis quam. Excepturi perspiciatis fugit voluptates corrupti fuga repellendus alias voluptatibus laudantium sed consectetur nam cum nihil in saepe repellat aspernatur accusantium sapiente, labore quae perferendis.</p>
<p>Dolor tenetur voluptate eum, illo qui aut unde vitae quos. Error placeat recusandae, consectetur dolore, facilis iusto distinctio fugit eligendi iure quia ab voluptatem dolor corporis, repellat aliquid laboriosam minus!</p>
<p>Rerum alias aspernatur, quae nostrum, cumque saepe voluptate dolore vitae distinctio veritatis fugiat, necessitatibus laborum! Quod vitae hic, totam consectetur labore ratione natus voluptatem, incidunt voluptatibus mollitia, expedita similique exercitationem!</p>
<p>Ipsum veritatis optio dolorem, sed nihil aliquam reprehenderit culpa provident quam expedita ratione consectetur ipsa beatae explicabo atque amet iure. Voluptatibus praesentium molestiae neque dolor nemo ipsam nesciunt ab sit!</p>
<p>Consequuntur ipsam assumenda quam laudantium ipsa fugit? Ad totam accusamus temporibus sunt eligendi cupiditate excepturi sequi voluptatem recusandae nesciunt laudantium deleniti id, est, nam nihil quidem veniam facilis tenetur adipisci.</p>
<p>Voluptates ipsa voluptatem delectus quis consequuntur expedita vel quod atque minus, temporibus sint inventore repudiandae quas in illum incidunt mollitia officia, fugit quos voluptas repellat suscipit officiis doloremque explicabo? Sequi!</p>
<p>Repellat possimus libero id in ut excepturi qui necessitatibus temporibus doloremque voluptatum autem facilis animi quisquam vel error incidunt eligendi esse, optio nemo consequatur quibusdam hic voluptas modi facere? Unde!</p>
<p>Ut deserunt error, vitae quam itaque dolorem ea quibusdam minima porro facilis id ex aliquid aliquam a distinctio nam, qui adipisci eius deleniti natus impedit atque? Eius labore cumque sequi.</p>
<p>Dolor dolorem ratione ullam repellendus ad vel praesentium obcaecati quisquam reiciendis, non, at natus deleniti velit aliquid magni. Debitis nulla quo minus quisquam nihil sequi aliquid reiciendis amet ratione cupiditate.</p>
<p>Ex et ullam esse, provident nisi fugiat autem unde sunt minima, ratione recusandae expedita possimus, fuga ut sit eius asperiores eveniet incidunt quae iure? Eaque cum fugit temporibus impedit exercitationem.</p>
<p>Nemo recusandae ratione reprehenderit labore cumque laborum placeat eius unde impedit modi maxime beatae vero eveniet repellat, quae non quisquam, sapiente ea laudantium eos iure blanditiis deserunt consequuntur. Modi, sed.</p>
<p>Sunt ab libero fugiat nisi dolor tenetur perferendis eaque sapiente aperiam sit iste corporis, voluptatem, saepe modi possimus quae necessitatibus velit quas at. Corrupti voluptates libero, repellendus magnam repudiandae illum?</p>
</div>
</div>
Note one caveat with this solution is that the text in top row won't be selectable (due to stacking order). Bad for usability and accessibility. You can work around this by placing the text in a separate container and positioning accordingly. I'll leave that up to you to explore.

Answer 2

I think you're making it too complicated! Try this?
<div style="margin: 30px; border: 4px solid red;">
<p style="max-width: 700px; margin: 0 auto; padding: 30px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div>
https://codepen.io/scottmledbetter/pen/MXVmbP

Answer 3

I believe this is what you want:
index.html
<div class="b one"></div>
<div class="b two"></div>
<div class="b three"></div>
<div class="b four"></div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
main.css
.main {
box-sizing: border-box;
padding: 2rem;
margin: 2rem;
}
.b {
position: fixed;
background: slateblue;
width: 30px;
height: 100%;
}
.two {
right: 0;
}
.three, .four {
width: 100%;
height: 30px;
}
.three {
top: 0;
}
.four {
bottom: 0;
}
Working pen: https://codepen.io/manAbl/pen/ZRxejr?editors=1100 ;
I believe you can also implement what you want using :before & :after pseudo-classes so you would use the body tag and just one more extra div to wrap your content. Using both pseudo-classes in the body and the extra div (Hopefully you can easily figure it out for yourself from here ...)
Hope helps :)

Answer 4

So I am pretty sure this is what you are looking for, but it was a little bit difficult to understand exactly what you meant.
Here is a JSFiddle of what I did.
Basically, you need another wrapper div for this to work. Putting the padding: 30px on the main keeps that border at least 30 pixels from the edge of the screen. Put the border on .content and then add some padding to it and a min-height of 100vh.
In case you haven't used the shorthand on margins, padding, etc., It goes in clockwise, starting from the top. So rather than setting:
.class {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
we can just do:
.class {
margin: 5px 10px 5px 10px;
}
You can shorten that further to just margin: 5px 10px; since top/bottom and right/left are the same.