This question has been asked an awful lot of times here, but I am yet to find a conclusive answer to this.
I'm working to implement right and left 100% height, fixed sidebars in my design. The Left sidebar works great, but the right one floats over the (min-width'd) content when the browser is resized.
When I set the position of the bars to absolute, it behaves well with horizontal window resizing, but then the sidebars aren't fixed on vertical scroll.
Check out my jsfiddle: http://jsfiddle.net/wjhzyt0u/17/
(If you resize the window, you can see the right blue bar float over the middle grey content).
HTML
<div class="wrapper">
<section id="sidebar-nav">
</section>
<section id="content">
<p>some rad stylin' content</p>
</section>
<section id="sidebar-notif">
</section>
</div>
CSS
html, body {
position: relative;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
height: 100%;
width: 100%;
min-width: 450px; /* dont want to squish the content too much */
}
#sidebar-nav, #sidebar-notif {
position: fixed;
height: 100%;
width: 150px;
background: lightblue;
}
#sidebar-nav {
top: 0;
left: 0;
}
#sidebar-notif {
top: 0;
right: 0;
}
#content {
margin: 0 150px;
height: 300px;
background: lightgrey;
border: 2px solid yellow;
}
Any help would be very welcome!!
My 'solution' for anyone else looking at a similar situation.
I ended up going with absolutely positioned sidebars (which scale to the size of the middle content), and added the Waypoint sticky plugin to scroll the sidebar content.
Updated JsFiddle: http://jsfiddle.net/wjhzyt0u/20/
Sticky divs stick to the top of the page on scroll - thus creating the illusion of 100% height sidebars.
Drawbacks are extra js weight + page load times.. but I'll take it for now.
Changes:
.wrapper {
position: absolute;
width: 100%;
min-width: 500px;
// removed 100% min-height, which lets the sidebars stretch to 100% height of the content.
}
#sidebar-nav, #sidebar-notif {
position: absolute; // changed to absolute from fixed.
height: 100%;
width: 150px;
background: lightblue;
}
// added sticky divs to sidebars, which stick to the top of the page on scroll (with help from Waypoints sticky plugin.
.sticky {
border: 1px solid red;
}
Related
Is it possible to prevent an element from scrolling away horizontally, but allow it to scroll vertically with the rest of the page content? It's a little hard to describe, so let me show an example:
HTML:
<nav>Side Nav</nav>
<header>Header</header>
<main>
<h1>Main Content</h1>
<div class="wideContainer">
Some wide and tall container
</div>
</main>
CSS:
nav {
position: fixed;
width: 150px;
height: 100vh;
}
header {
height: 100px;
padding-left: 150px;
}
main {
padding-left: 150px;
}
.wideContainer {
width: 2000px;
height: 1000px;
}
https://jsfiddle.net/hg2zmu1o/7/
As you can see, the left column is fixed. The header scrolls away when you scroll vertically. This is correct. But when there is some wide content in the main region, it makes a horizontal page scroll (which is fine). However, when scrolling horizontally, the header also moves behind the side nav column.
How can I make it stay horizontally?
I tried using position:sticky but without success.
position: sticky;
left: 150px;
Keep in mind, I don't want to do position:fixed on the whole header, because then it wouldn't scroll vertically with the rest of the page.
The jsfiddle illustrates the problem.
EDIT:
Found this example that demonstrates the behavior I'm after. It uses JS though, which I was hoping to avoid.
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + 15
//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
});
});
If anyone knows how to achieve it with pure CSS let me know. Otherwise I may go with this in the meantime.
Just add overflow-x to your CSS.
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
nav {
position: fixed;
width: 150px;
background-color: gray;
height: 100vh;
}
header {
height: 100px;
background-color: silver;
padding-left: 150px;
}
main {
padding-left: 150px;
}
.wideContainer {
width: 100%;
height: 1000px;
background-color: turquoise;
}
<nav>Side Nav</nav>
<header>Header</header>
<main>
<h1>Main Content</h1>
<div class="wideContainer">
Some wide and tall container
</div>
</main>
Is this what you've been looking for?
I also made this and this.
Hope it helps!
I am having a lot of trouble figuring this one out, essentially I have 3 columns: navbar (dark gray), main content (dark red) and sidebar (dark green) where navbar can be expanded and shrinked and sidebar can slide out and slide in (so change width from 0 to something and back to 0). And I want to keep all of this responsive. Idea is to shrink main content accordingly when some or both navbar and sidebar are expanded. unfortunately only way I can think to do this is to change width of main content to something like width: calc(100% - navbar width - sidebar width) but this is really verbose when I need to check if sidbar is expanded or navbar, or both are not expanded etc...
Here is an image illustrating how main content shrinks:
I assume flexbox could be used here somehow, but was not able to figure it out.
let example marku be
<nav> </nav>
<main> </main>
<aside> </aside>
note: nav and aside need to be 100% height of the page and are fixed in place.
You can use flex-box for this. A simple approach would be as follows: http://codepen.io/anon/pen/pgVVJb
You can change the classes to see how it changes the layout. NOTE: I am using classes to change the width of the columns but you could use JavaScript or static CSS similarly.
Code dump:
<div class="container">
<div class="small">Nav</div>
<div>Content</div>
<div class="medium">Sidebar</div>
</div>
html, body, div {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.container div {
flex: 1;
border: 1px solid #ccc;
background: gray;
}
.small {
max-width: 50px;
}
.medium {
max-width: 150px;
}
One popular solution to this is putting all of these elements in a wrapper with position: relative or even putting setting body's to position: relative, and all the elements inside with position: absolute. Then you can set each element as follows:
.navbar {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 50px;
}
.main-content {
position: absolute;
top: 0px;
left: 50px;
bottom: 0px;
right: 150px;
}
.sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 150px;
}
Of course the container element need to have some height for this to work.
I'm having an issue with a fluid sidebar and a content box next to it.
I designed my left #sidebar to my liking, but not I'm having trouble making a content box that fills up the remaining space next to it.
I'd like to have the whole project take up 100% of the page width. The problem is coming from the min/max widths on my sidebar.
Been goin' hard on this all day and still having problems, void space between, overlapping ,ect.
http://jsfiddle.net/DrDavidBowman01/PjLgE/
CSS
#container {
width: 100%;
display: block;
height: 100%;
}
#sidebar {
display: block;
width: 22%;
float:left;
min-width: 236px;
max-width: 332px;
height: 100%;
position: fixed;
border: 2px solid #0C6;
background-color: #000;
}
#content {
width: 88%;
height: 400px;
border: 6px solid #F00;
display: block;
color: #fff;
float: left;
position: relative;
max-width: calc(88% - 236px);
min-width: calc(88% - 332px);
}
HTML
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
It's a combination of two things. First, if you want to have divs take up 100% height, then you'll need to set the body and html to that as well.
html, body {
height: 100%;
}
Second, you have set the sidebar as position: fixed. This is just like having position: absolute set on it. If you want the sidebar to remain visible at all times, you can do a margin-left: 22%; (or whatever the width of the sidebar is) on #content. If you want the sidebar to flow with the rest of the page, just remove the fixed position.
This is because your sidebar is position: fixed. The best route would be to relatively position/float the sidebar at 100% height and position a fixed wrapper within it.
basic demo
I am trying to design a layout where i will have header 100px at the top. footer 80px always stick to the bottom of browser screen and an scrollable content area in between header and footer. the vertical scrollbar should come in the content area when i finished writing till the content touches the top end of footer.
Can Anyone suggest me how can i achieve this
Here is what i have tried: JsFiddle
<header>
</header>
<div id="main">
<div id="content">
scrollable content area
</div>
<footer>
footer always appearing bottom of the browser screen
</footer>
</div>
My css:
header {
height: 100px;
width: 100%;
background: #bbb;
}
#main {
background: #ccc;
width: 100%;
height: 100%
}
#content {
position: relative;
height: 100%;
width: 100%;
background: green;
overflow-y: auto;
}
footer {
position: relative;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
EDITED: FIDDLE
#content {
position: absolute;
height: calc(100% - 180px);
background: green;
overflow-x: hidden;
overflow-y:scroll;
}
I answered a similar question before at: Div height percentage based but still scrolling
Here is one approach.
The HTML:
<header>The Header...</header>
<div id="main">
<div id="content">
scrollable content area
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
</div>
<footer>footer always appearing bottom of the browser screen</footer>
The CSS:
html, body {
height: 100%;
}
body {
margin: 0;
}
header {
height: 100px;
width: 100%;
background: #bbb;
position: absolute;
top: 0;
}
#main {
background: #ccc;
width: 100%;
position: absolute;
top: 100px;
bottom: 80px;
left: 0;
right: 0;
overflow-y: auto;
}
#content {
overflow: auto;
background: green;
}
footer {
position: absolute;
bottom: 0;
height: 80px;
width: 100%;
background: #aaa;
}
The trick is to create an absolutely positioned block container that spans the area between the header and the footer, #main, using the top, bottom, left, right offsets, and apply overflow-y: auto.
The #content will then take up space and eventually trigger the scroll bar on #main.
See demo at: http://jsfiddle.net/audetwebdesign/aNRE9/
You will need to use JavaScript for this unfortunately. No big deal. I've also added the handler for when you resize the window.
var resizeTimer;
window.onload = function(){
makeMiddleFull();
}
window.onresize = function(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(makeMiddleFull, 100);
}
function makeMiddleFull(){
var cobj = document.getElementById('content');
cobj.style.height = (getDocHeight() - (document.getElementById('header').style.height + document.getElementById('footer').style.height)) + "px";
}
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);
}
See updated fiddle for full code updates including DOM and CSS here:
http://jsfiddle.net/Qpc2s/2/
Just tell me what you have tried? I don't see any header, any footer, just a text there in the scollable div.
Ok let me guide you a bit.
What you do is simple but would require you to understand the point.
How to make the footer stick to the bottom.
footer {
position: absolute; // position as absolute..
bottom: 0; // margin-bottom as 0
max-width: 80px; // width
margin: 0 auto; // margin..
}
This will make the footer to always stay at the end of the document I mean at the bottom of the page.
How to make header
header {
position: absolute;
top: 0;
max-width: 100px;
margin: 0 auto;
}
How to make a scrollable div
I donot fully understand this one. So I am just going to guide you a bit.
You can create a scrollbar in the content div. You want this:
the vertical scrollbar should come in the content area
You can do that by using this:
div {
max-height: 100px;
min-height: 100px;
}
I will assume that you are going to change the div to the element or class or id to the one you're having.
Making a scrollable div with a scrollbar.
First you will create a div with a max-height, to make the div not exceed the height of the screen. Then you can use a scrollbar like this:
overflow: scroll;
Add this property to the element. This way, you'll have a footer, an header, and a content block which has a scrollbar for it self, not the one that browser has.
Fiddle for this:
http://jsfiddle.net/afzaal_ahmad_zeeshan/aNRE9/2/
I am really sorry but I didn't bother changing the background, but you can see, the header stays there, footer at the end, and the div scrolls! :)
Good luck!
I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.
No problem so far.
But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.
I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).
What is the best way to create such a page?
I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.
Live Demo (complete with boring colours)
The HTML is very simple:
<div id="header">header</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
On the other hand, the CSS is a bit more complicated:
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#header, #middle, #footer {
position: absolute;
width: 100%
}
#header {
background: #777;
height: 150px;
top: 0
}
#middle {
background: #f00;
top: 150px;
bottom: 150px
}
#footer {
background: #777;
height: 150px;
bottom: 0
}
#left, #right {
overflow-y: scroll
}
#left {
background: #aaa;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%
}
#right {
background: #999;
position: absolute;
left: 50%;
top: 0;
float: right;
width: 50%;
height: 100%
}
I will explain how the CSS works if you ask me to.
Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.
note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.