Question

我正在尝试格式化我的网页，因此我可以拥有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％的页面，那么就像边界一样。像这样：

Answer 1

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

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

当然，要使用高度百分比，您必须拥有定义了100％高度的HTML和正文（html, body { height: 100%; }）。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

使用CSS3：

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

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

2 个答案: