I have a div along the left side of my page for navigation links. Clicking on a header expands a subset of links. I have this div set to 100% of the page height so that the column takes up the entire left side of the page. The problem occurs when all of the sub categories are expanded. The content of the div runs off the bottom of the page, but doesn't add a scroll bar.
I tried setting the height to auto to see if that would fix the problem (ignoring the fact that it doesn't take up the whole left side), but that didn't fix it either.
So, what do I need to do to get a scroll bar when the div expands past the height of the page? Then have the scroll bar go away if it's not needed.
Thank you.
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:140px;
left:0;
background-color:#f0f0f0;
}
<div class="leftNavigation">
<p class="linkHeader" id="townLinksHeader"><img src="img/image.jpg" width="200" height="40" alt="Sunnyvale, CA" /></p>
<div class="links" id="townLinks">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
There are 4 paragraph/div combinations inside the left navigation div. Only the paragraph is show until it is clicked on. The links div is then show. When each of those is expanded, it runs off the bottom of the page but doesn't add a scroll bar.
Adding overflow:auto didn't change anything.
Does the side content div use fixed positioning? Because, that is usually why a scrollbar does not appear. Try setting the overflow:auto css style on that div to add a scrollbar when needed.
Update:
You have top:140px in there and height:100%. This is actually pushing the side div down below the page. If the expandable content is not taking up much space, then it will flow off the bottom of the page and no scrollbar will appear.
Try this:
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:0;
left:0;
padding-top:140px;
overflow:auto;
background-color:#f0f0f0;
}
When something is 'fixed' positioned, it will not add scroll bars. You can either try positioning it with position: relative, or you can set top: 0. If top:0 still isn't enough, you'll have to set the height to a fixed height that is smaller than your window.
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:0;
bottom:0;
left:0;
margin-top: 140px;
overflow:auto;
background-color:#f0f0f0;
}
Now it's correct.
Related
I have a menu that slides in from offscreen. There's no horizontal scrollbar showing, but you can still slide the screen manually (in IE and Chrome, not Firefox) and see the offscreen div in the horizontal overflow. Obviously, I really want it hidden.
A simple example (without the javascript to make the offscreen div slide in) can be seen at https://jsfiddle.net/7g0x96hs/ and below:
<div id="maintext">I'd like the footer to display below, but the offscreen div to the left to not be visible by scrolling.</div>
<div id="footer"></div>
<div id="offscreen"></div>
body{
overflow-x:hidden;
}
#footer{
position:absolute;
top:1000px;
width:100%;
height:10px;
background-color:#000000;
}
#offscreen{
position:absolute;
width:100%;
height:100%;
z-index:1200;
background-color:#000000;
right:-100%;
top:0;
}
How can I ensure the user cannot manually move the page horizontally? overflow-x:hidden on the body (or a wrapper div) doesn't work... Seems to be the vertical scroll that's causing the problem.
Thanks!
I have a menu that slides in from offscreen. There's no horizontal scrollbar showing, but you can still slide the screen manually (in IE and Chrome, not Firefox) and see the offscreen div in the horizontal overflow. Obviously, I really want it hidden.
A simple example (without the javascript to make the offscreen div slide in) can be seen here and below:
<div id="maintext">I'd like the footer to display below, but the offscreen div to the left to not be visible by scrolling.</div>
<div id="footer"></div>
<div id="offscreen"></div>
body{
overflow-x:hidden;
}
#footer{
position:absolute;
top:1000px;
width:100%;
height:10px;
background-color:#000000;
}
#offscreen{
position:absolute;
width:100%;
height:100%;
z-index:1200;
background-color:#000000;
right:-100%;
top:0;
}
How can I ensure the user cannot manually move the page horizontally? overflow-x:hidden on the body (or a wrapper div) doesn't work... Seems to be the vertical scroll that's causing the problem.
This can be solved creating a div wrapper inside of your body and applying overflow-x:hidden; to it.
Check this working fiddle (try to scroll it).
.wrapper {
overflow-x:hidden;
}
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
So I have a fluid layout with a min-width on the body of 960px. I have a fixed header, which works as intended, and a right-side nav bar which I want to remain fixed on the vertical scroll... this also works.
However if I resize the window to less than 960px width I would like the right hand nav bar (position:fixed) to stay to the right on the horizontal scroll instead of overlaying the content.
#mainnav {
width:20%;
height:100%;
margin-left:80%;
position:fixed;
}
#mainhead{
position:fixed;
top:0px;
left:0px;
width:100%;
height:46px;
}
#contentcontain{
margin-top:46px;
width:80%;
}
I'm sure I could do it with using JS but I was just wondering if there is a more simple way to it without JS.
Thanks,
Dom
An element with position:fixed is pulled out of the normal flow of document layout and will always sit on top, unless you give it a z-index value.
Here is the sample code!
If the result area is too small and you will have to scroll down - some of featuresMenu text will hide behind the footer. How to prevent this, how to make featuresMenu to stick until it reaches footer?
Thanks!
body {
margin-bottom:50px;
}
#div_id {
position:fixed;
bottom:0;
right:0;
left:0;
width:100%;
height:50px;
}
this should do the trick, make sure whatever the height of div is you make a margin at the bottom of the page, so stuff doesn't hide there
Set the z-index of the floating div to 1, and the z-index of the footerdiv to -1.