Размер адаптивной границы соответствует странице, а не области просмотра

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>

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>