HTML/CSS - Sidebar Length 100% Page Height, Regardless of Vertical Scrollbar
Question
I'm sure this has been asked quite some times however after quite some time searching for a solution I have finally resorted to asking a question here!
I am working on an HTML Help file for an application I am developing, where the file is split into two sections. One, a sidebar (floated to the left) and two, the main content section (also floating left).
The problem I am facing is that when the main content extends beyond 100% of the page height, the sidebar background stops.
I would use the faux column effect where I assign the a background image of my sidebar however to maintain my design's integrity I have to set a different background image for the body.
Check out this JS Fiddle I set up - http://jsfiddle.net/5gpFx/
Hopefully that can help you see what the issue is if I failed to communicate it well enough!
Cheers!
2 answers
solution1
0 2016-08-25 23:12:42
I had the same problem but I could not make work the solution with flexboxes above. So I created my own template, that includes:
- a header with a fixed size element
- a footer
- a side bar with a scrollbar that occupies the remaining height
- content
I used flexboxes but in a more simple way, using only properties display: flex and flex-direction: row|column :
I do use angular and I want my component sizes to be 100% of their parent element.
The key is to set the size (in percents) for all parents inorder to limit their size. In the following example myapp height has 100% of the viewport.
The main component has 90% of the viewport, because header and footer have 5%.
I posted my template here: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
Html:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
solution2
0 2011-10-27 09:02:20
Just wrap both columns in a container and set the faux-column background on that - this way the body will be available for setting whatever image you want. I've made a simple example here: http://jsfiddle.net/5gpFx/2/
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.