Html 响应边框大小为页面而不是视口

我需要一个4倍厚的固体边界周围我的网页。距离边缘30像素。它需要有响应性，所以如果网站滚动，边框应该始终是从页面边缘而不是视口的30像素

我试图使用div的定位绝对30px，在页面周围有4px的边框。但这对页脚不起作用，因为当页面滚动时，页脚不会停留在内容的底部。有时内容不会填满视口，所以我可以在主要内容周围有一个边框

主要{ 宽度：70%； 左边距：自动； 右边距：自动； 边缘顶部：50px； 边缘底部：50px； } 内容2{ 背景：232C44； 颜色：白色； 填充：30px； } b1{ 位置：绝对位置； 左：30px； 右边框：4px实心916E00； 顶部：30px； 底部：30px； } b2{ 位置：绝对位置； 左：30px； 边框底部：4px实心916E00； 右：30px； 顶部：30px； } b3{ 位置：绝对位置； 顶部：30px； 底部：30px； 左边框：4px实心916E00； 右：30px； } b4{ 位置：绝对位置； 左：30px； 边框顶部：4px实心916E00； 右：30px； 底部：30px； } Lorem ipsum dolor sit amet，是一位杰出的献身者。非同侧前空。拉奥里特的莫比·萨吉蒂。前叶无等分。莫里斯在努克nec托托尔亨德雷特在多洛euismod pharetra。取而代之的是，莱克托斯·维塔·森佩尔·乌尔特里斯， 我和孕妇在一起，坐在埃米特·波苏尔·梅特斯和利奥之间。Mauris euismod，直径为ullamcorper的faucibus，urna magna tempus dolor，nec congue nulla dui nec tellus。前庭无明言，即孕妇无明言。整数便利化，nibh sed 维韦拉·沃尔帕特，我是一名侵权者，欧盟的精英。在大码头。这是我的心愿。我是马蒂斯·厄洛斯，我的生命之旅。在hac habitasse Plateum，一句名言。乌伊斯，温文尔雅的厄洛斯。类aptent taciti 根据康努比亚·诺斯特拉，根据希梅纳奥斯的继承人，社会责任。奥古斯·普鲁斯（augue purus）是一位封建统治者，他是一位伟大的领袖。莫利斯的病魔。

---

我觉得你把事情弄得太复杂了！试试这个

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

---

我相信这就是你想要的：

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>

工作笔：

我相信您也可以使用：before&:after伪类实现您想要的功能，这样您就可以使用body标记和一个额外的div来包装您的内容。在body中同时使用伪类和额外的div，希望您可以从这里轻松地为自己找到答案

---

希望有帮助：

所以我很确定这就是你想要的，但要准确理解你的意思有点困难

下面是我所做的一个例子

基本上，您需要另一个包装器div才能工作。将padding:30px放在主屏幕上，使边框与屏幕边缘保持至少30像素的距离。将边框放在.content上，然后添加一些填充，最小高度为100vh

如果您没有在边距、填充等方面使用速记，则从顶部开始顺时针进行。因此，与其设置：

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

我们可以做到：

.class {
    margin: 5px 10px 5px 10px;
}

---

你可以进一步缩短到只有边际：5px10px；因为上/下和右/左是相同的。

我建议在主体元素中添加边框。请检查以下内容

html，正文{ 最小高度：calc100vh-68px； } 身体{ 边框：4px实心916E00； 利润率：30像素； } 主要{ 填充：0.10%； } 我的同僚们都是精英。积累性劳动是否是一种解决方案，是不是可以解释为一种权利

我的同僚们都是精英。包括发明者自由劳动解决方案、iste负号、动物流动性救济金、工作实践

自由之歌。除了在时间层面之外，所有的一切都是一种脆弱的脆弱？这是一个非常小的数字，这是一个非常小的数字

哈伦·阿伯鲁帕特，我要你去参加一个小聚会！在我的生命中，我的生命是最伟大的，最伟大的，最伟大的！全方位照明系统

在圣塔梅特市，因其流动性不足而导致的铜酸盐沉积时间！这是一个很好的例子，这是一个很好的例子

如果你的脸上长满了白斑，你的脸上长满了白斑，你的脸上长满了透明的亮光。Reisiendis，在sunt解释道，你是不是想让你的眼睛看起来像是被驱赶的

我们发明了一种藏药，它可以用来治疗疾病，也可以用来治疗疾病？国际单位 减少消耗，确保照明选择符合要求

---

尝试所有边框的固定位置，并给主体留一个边距，以便内容不会随边框的边缘一起塌陷，但如果边框固定，则内容将在边框后面运行。上边框和下边框需要与页面相对，而不是与窗口相对。但是，这对侧边边界非常有效。。事实并非如此，因为卷轴两侧会有一个间隙。第二部分：有趣！除非顶部的高度是预设的，否则我不相信有一个纯粹的CSS解决方案。否则，可以使用一点点JS来完成。这对你有用吗？@zumek yes JS很好。我只想让它尽可能简单。但是，是的，思想开放：我几乎用flexbox实现了它。@pinkp嘿，我添加了第2部分。祝你的项目好运：谢谢你的回复，但是如果内容没有填满视图端口的高度，边框就会出现。我需要它保持30px的所有边缘，包括底部，无论内容的长度..我在这方面做了更多的工作。边界现在的行为应该与您想要的一样。你怎么认为？还不能对其他帖子发表评论，所以只能这样。至于曼努埃尔·布兰科（Manuel Blanco）的回答，尽管可能有效，但没有必要让单独的分区作为边界。对于这个问题，这不是一个非常干净的解决方案，因为有很多方法可以让css做到这一点，而不会让人感到特别头疼。至于KacosPro的答案，它是正确的，只是你不需要flex来做到这一点。由于最小高度为100vh，他的答案中的弹性实际上根本不影响输出。当然，您可以使用flex将其拉伸到容器的高度，但实际情况并非如此。谢谢，但即使您将内容最小化，当页面滚动时，底部边框仍会在视口下方运行。100vh+另一个填充和边框溢出页面。谢谢，但这不符合需要，在我的情况下，我希望边框位于页面底部，而不是查看端口。但边框应随内容扩展，但如果内容未填满屏幕，则始终保持在距视图端口底部30px的位置。在您的示例中，边框始终固定在边缘，内容在其后面滚动。这里的问题是100vh+其他维度，如填充和边框，意味着即使内容较短，页面也始终滚动。当内容太短而无法填充时，边框应该位于视图端口的底部。好的，当然，您可以通过使用calc进行计算来适应它-我已经更新了代码段。68px=顶部+底部边距+边框宽度*2我在这个问题上增加了第二部分，因为我的设计比问题1更进一步。如果你有蚂蚁的想法，他们是受欢迎的。

.class {
    margin: 5px 10px 5px 10px;
}