HTML / CSS-具有可滚动内容的固定页面边框
[英]HTML/CSS - Fixed page borders with scrollable content
问题描述
I am trying to format my webpage so i can have a border-left and border-right . 
我正在尝试格式化网页，以便可以设置border-left和border-right 。 I want to have the border take up 100% of the page height even if the content on the page does not. 我希望边框占据页面高度的100％，即使页面上的内容没有。
I have been able to achieve this but, if content on the page exceeds 100% of the page height and the user must scroll, then the border does not fill the extra height on the page. 我已经能够实现这一点，但是，如果页面上的内容超过页面高度的100％，并且用户必须滚动，则边框不会填充页面上的额外高度。
How can I fix this with CSS? 如何使用CSS修复此问题？
I am using Ruby on Rails, and I am adding my CSS to the application.html.erb file like so: 我正在使用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>
This is an example from one of the pages on my site of what it looks like currently: 这是我网站上其中一个页面上的当前示例：
If i remove the height: 100%; 如果我移除height: 100%; then the border will only fill as far as the page on the content goes. 那么边框只会填满内容上的页面。 So if only 10% of the page is used then that is as far as the border goes. 因此，如果仅使用10％的页面，那么这就是边界所能达到的程度。 Like so: 像这样：
2 个解决方案
解决方案1
1 已采纳 2016-09-18 02:07:33
The real issue here is overflow. 真正的问题是溢出。 When content is bigger than 100% of viewport, the borders will not continue because they are "capped" at 100%. 当内容大于视口的100％时，边框将不会继续，因为它们被“限制”为100％。
You could either use overflow: auto or replace height: 100% in .borders { ... } to min-height: 100%; 你既可以使用overflow: auto或更换height: 100%在.borders { ... }到min-height: 100%;
Of course for percentage height to work, you must have HTML and Body with 100% height defined ( html, body { height: 100%; } ). 当然，要使百分比高度起作用，必须具有定义了100％高度的HTML和Body（ html, body { height: 100%; } ）。
Working Example: 工作示例：
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>
解决方案2
0 2016-09-18 01:11:31
try this 尝试这个
<body style="height: 100%">
<div class="border">
</div>
</body>
With CSS3 : 使用CSS3：
.border{
...
height : 100vh;
...
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.