Question

我的网页周围需要4像素厚的实线边框。距边缘30像素。它需要响应，因此，如果网站滚动边框，则边框应始终距PAGE边缘而不是VIEWPORT边缘30px。

我正在尝试使用div定位在页面周围30px（带有4px边框）的位置。但这对页脚不起作用，因为它在页面滚动时不会停留在内容的底部。有时候内容不会填满视口，所以我可以在主要内容周围加上边框。

#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

好的，所以我们有一些答案。我想将其带入设计所需的第二阶段。我需要页面TOP和BOTTOM的两个部分。这些出血的颜色超过边界。如何将其创建为与问题的第一部分相同的规格。

这是它的外观：

这是当前外观：

不用担心宽度和高度。如何使顶部的所有白色和底部的全部蓝色。同时仍使其响应。底边框与PAGE边缘的距离始终相同（无视口）？即使页面需要滚动。

Answer 1

我建议在body元素上添加边框。请检查以下内容

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>

如果没有足够的内容填充视口，这将使边框与页面底部对齐。

使用JS的PART 2解决方案-代码段中包含的注释

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>

请注意，此解决方案的一个警告是，第一行中的文本将不可选择（由于堆叠顺序）。不利于可用性和可访问性。您可以通过将文本放在单独的容器中并进行相应定位来解决此问题。我让你去探索。

Answer 2

我认为您太过复杂了！试试这个吗？

<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

您可以使用flexbox解决方案。

告诉身体min-height应该是100vh，main容器要随着剩余空间的增长而生长

body {
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#main {
  flex: 1;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  padding: 30px;
  border: 4px solid #916E00;
}

<div id="main">
  <div class="content">
    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>
</div>

Answer 4

我相信这就是您想要的：

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;
}

工作笔：https://codepen.io/manAbl/pen/ZRxejr?editors=1100;

我相信您也可以使用：before＆：after伪类实现您想要的内容，因此您可以使用body标记和一个额外的div来包装内容。在正文和多余的div中同时使用伪类（希望您可以从这里轻松地自己弄清楚……）

希望有帮助：）

Answer 5

所以我很确定这是您要寻找的东西，但是要确切地理解您的意思有点困难。

这是我所做的JSFiddle。

基本上，您需要另一个包装器div才能起作用。将FileWriter fw = null; BufferedWriter writer = null; // File logFile = null; @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { try { LocalDate localDate = LocalDate.now(); File logFile = new File("/home/ramesh/logReqRes"+localDate.getDayOfMonth()+localDate.getMonth()+".txt"); boolean flag = logFile.createNewFile(); System.out.println("flag :" + flag); if( flag || logFile.length() >= (1024*1024*1024)) fw = new FileWriter(logFile, false); else fw = new FileWriter(logFile, true); writer = new BufferedWriter(fw); if (isAsyncDispatch(request)) { filterChain.doFilter(request, response); } else { doFilterWrapped(wrapRequest(request), wrapResponse(response), filterChain); } } catch (IOException io) { io.printStackTrace(); } catch (Exception ex) { ex.printStackTrace(); } finally { try { if (writer != null) writer.close(); if (fw != null) fw.close(); } catch (IOException ex) { ex.printStackTrace(); } }放在主屏幕上可使边框距屏幕边缘至少30像素。将边框放在padding: 30px上，然后在其中添加一些填充以及.content中的min-height。

如果您未在边距，填充等上使用速记，则从顶部开始顺时针旋转。因此，与其设置：

100vh

我们可以做到：

.class {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 10px;
}

您可以将其进一步缩短为.class { margin: 5px 10px 5px 10px; }，因为顶部/底部和右侧/左侧是相同的。

自适应边框，大小适合页面而不是视口

5 个答案: