HTML/CSS - Fixed page borders with scrollable content
Question
I am trying to format my webpage so i can have a border-left and border-right . I want to have the border take up 100% of the page height even if the content on the page does not.
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.
How can I fix this with CSS?
I am using Ruby on Rails, and I am adding my CSS to the application.html.erb file like so:
<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%; 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. Like so:
2 answers
solution1
1 ACCPTED 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%.
You could either use overflow: auto or replace height: 100% in .borders { ... } to min-height: 100%;
Of course for percentage height to work, you must have HTML and Body with 100% height defined ( 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>
solution2
0 2016-09-18 01:11:31
try this
<body style="height: 100%">
<div class="border">
</div>
</body>
With CSS3 :
.border{
...
height : 100vh;
...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.