HTML/CSS - 修复了带有可滚动内容的页面边框答案

【问题标题】：HTML/CSS - Fixed page borders with scrollable contentHTML/CSS - 修复了带有可滚动内容的页面边框
【发布时间】：2016-09-18 01:02:22
【问题描述】：

我正在尝试格式化我的网页，以便拥有border-left 和border-right。即使页面上的内容没有，我也希望边框占据页面高度的 100%。

我已经能够做到这一点，但是，如果页面上的内容超过页面高度的 100% 并且用户必须滚动，那么边框不会填充页面上的额外高度。

如何用 CSS 解决这个问题？

我正在使用 Ruby on Rails，并将我的 CSS 添加到 application.html.erb 文件中，如下所示：

<body>
   <div=borders>
      <%= yield %>
   </div>
</body>

<style>
   .borders {
      padding-top: 2%;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 5%;

      height: 100%;
      border-left: 120px solid #808080;
      border-right: 120px solid #808080;
   }
</style>

这是我网站上其中一个页面的示例：

如果我删除了height: 100%;，那么边框只会填满内容页面。因此，如果只使用了 10% 的页面，那么这就是边界。像这样：

【问题讨论】：

你能显示在
生成的实际 html 吗？
对不起科迪，帮不了你...:(
试试这个：html, body, .borders { height: 100%; }
@Aziz 添加.borders { height: 100% } 不能解决问题。这使得边框达到页面的 100%，但没有进一步。这意味着如果您必须向下滚动，则下面的所有内容都没有边框。而html, body { height: 100% } 通常什么都不做

标签： javascript jquery html css ruby-on-rails

【解决方案1】：

这里真正的问题是溢出。当内容大于视口的 100% 时，边框将不会继续，因为它们“上限”为 100%。

您可以使用overflow: auto 或将.borders { ... } 中的height: 100% 替换为min-height: 100%;

当然，要使百分比高度起作用，您必须定义 100% 高度的 HTML 和正文 (html, body { height: 100%; })。

工作示例：

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.borders {
  padding-top: 2%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
  min-height: 100%;
  border-left: 120px solid #808080;
  border-right: 120px solid #808080;
}

.borders div {
  border: 1px dashed red;
  height: 10000px;
}

<div class="borders">
  <div>long text</div>
</div>

【讨论】：

非常感谢。 min-height 正是我所需要的。与html, body 部分结合使用。你知道如何添加阴影吗？我希望页面的白色部分与灰色边框接触，在页面的左侧和右侧有一个黑色阴影。
@CodyPritchard 在这种情况下，我建议将边框全部去掉，并将主体背景设为灰色，而.borders 容器以margin: 0 auto 为中心并具有百分比宽度。这样您就可以毫无问题地使用 CSS box-shadow 属性：jsfiddle.net/azizn/pto819xn/1
再次感谢。那成功了。我现在只需要删除box-shadow 的顶部
@CodyPritchard 如果您添加 html, body { margin: 0; padding: 0; }，您将看不到它，但是这里有更多答案：stackoverflow.com/questions/7024517/…
是的，我有margin: 0; padding: 0;，但这并不能解决问题。我发现最有效的方法是添加一个与盒子阴影半径匹配的垂直偏移，如下所示：box-shadow: 0px 50px 50px black;。感谢大家的帮助

【解决方案2】：

试试这个

<body style="height: 100%">
  <div class="border">
  </div>
</body>

使用 CSS3：

.border{ 
 ...
 height : 100vh;
  ...
 }

【讨论】：