Cody Pritchard Cody Pritchard - 2 months ago 11
CSS Question

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

enter image description here

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:
enter image description here

Answer

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>