ScrollBar on Top of Html Content - html

as you know if html content vertical view is more than browser window, a vertical scroll bar will add to page. It will cause moving html content into left which does not have a good view.
You can avoid this treat using this CSS code:
html{
overflow: scroll;
}
But there is a problem with this code, you will always see a disabled scroll bar on right side of the page. Now let's check another way, in this way you will subtract body width of the scroll width:
body {
width: calc(100vw - 68px);
margin-left: 34px;
}
This will put body in center and if in future a vertical scroll bar add to the page, it won't affect content and will be on the right side out of the body area! This way is good but there is a very little problem. you have subtracted your body width!!! Just think I have a fully filled body area! In this situation I need the whole 100% width and also I do not want the scroll bar to move my content into left and also I do not want to see a disabled scroll bar always!
So I'm looking for a way I can make scroll bar while showing on top of html content. so Nothing will move and also I have 100% width and when ever it is needed I will see scroll bar.
Is there such trick? Hope I'm clear enough.

Related

Scrollbar only on one div and not the whole body

I have a problem, i am making a website for a friend and he wanted a horizontale one page website,
but i have a problem, i want to create it like this that you can scroll the page vertical if the page is longer then the screen, BUT i want the scrollbar IN the div and not over the whole body content.
I created a image quickly what i mean with the scrollbar.
and on this moment if had did it over the whole body all the other pages got the same height if one page was longer then the other one.
Image:
Live example: http://onepage.ringocontent.com/
The live example is how i described it above about that all the pages get the same height if only one page get a overflow with the height.
Adding this to your stylesheet should solve the problem:
<style>
#home, #blog, #info, #contact {
overflow-y: scroll;
height: 500px;
}
#page {
height: auto;
}
</style>
I think what you are looking for here is the overflow property of an element. Particularly overflow-y.
If you apply
overflow-y: auto;
To the #page div then you will get a scroll bar inside of that div if and only if you have content inside of it that overflows the height of the div.
If you are seeing a scroll bar on the right hand side of the page then you have the div #page height set too tall, try reducing the height on that div until that scroll bar goes away.

Double vertical scrollbars are showing on iFrame page

I have an index page that includes both a left and a right iFrame. For some reason on the second iFrame it shows a scroll bar for its iFrame and another scroll bar for the whole page.
I have been trying to remove the scroll bar for the whole page and just leave the scroll bars for the 2 iFrames only
When I go and change the css property to overflow hidden for the body,html element it also removes the scroll bar for both iFrams
I have even tried to set the iFrame element overflow-y: to auto and the body,html overflow to hidden.
That still didn't work.
The second issue I am having is that the iFrame does not extend all the way to the bottom of the page even when I specified the height to be a 100% .
I have been fiddling with the CSS but go no luck so far. I would appreciate it if anyone can try to help me out.
Below is the link to my webpage, and the css snippet. Thank you!!!
html,body{ height: 100%; margin:0;padding:0; }
iframe{
height:100%; margin:0;padding:0; border: 0;
}
http://15c04752.ngrok.com/simplemenu/menus/demo (Text might be rendered smaller in different browsers please hit ctrl+ cmd+ on your keyboard to get the scrolling to show)
To remove the scrollbar for the whole page, add this rule:
body, html {
overflow: hidden;
}
To enable scrollbars on the iframes, add this attribute:
<iframe ... scrolling="yes"></iframe>
Source
And that's how it looks like, if you add both:
There is no scrollbar for the whole page, no scrollbar for the left iframe (because the content is fully visible) and a scrollbar for the right iframe (because the content is not fully visible). If you make the windows smaller, the scrollbar for the left iframe will appear.
I had a similar issue when using an iframe. The element containing the iframe was not long enough to justify a second scrollbar; its just a youtube video taking up about 600 pixels in height so I did not need a second scrollbar. The fix for me was just
html, body { height: 100%; }
in CSS. If that doesn't help my next best guess is to use webkit to just visibly hide them if all else fails.

Make floating div not grow beyond screen - activate scroll bar instead

I have a cart div for my webshop that sticks to the screen when you scroll down. I'm using the solution from this page - the answer that has the most vote up's, not the accepted answer:
How can I make a div stick to the top of the screen once it's been scrolled to?
When the visitor adds many items, the cart gets taller than the browser window, and some items disappear below the browser. I want to add a scroll bar to the div using overflow-y: scroll, but the problem is that, even if the div is taller than the screen, the browser still thinks the user can see the whole div, so the scroll bar doesn't get enabled.
Can I somehow make the div understand that it shouldn't grow beyond the screen, and activate the scroll bar instead?
Thanks!
You could possibly use max-height in conjuction with media queries based on screen height?
As per my understanding max-height will work for this kind of module.
check http://jsfiddle.net/kundansankhe/mch22264/1/
html, body {
height:100%;
}
.test {
position:fixed;
top:0;
overflow-y:auto;
border:1px solid red;
width:150px;
max-height:100%;
}
to occupi scroll-bar space, you can use overflow-y:scroll, so it will occupied scroll-bar space and will enable when content goes larger than screen height.
check updated link http://jsfiddle.net/kundansankhe/mch22264/1/

Scrolling Content while Header/Footer Remains Stationary

I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website
First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.

HTML body height - fixed?

I'm trying to make the main body of my site to have a fixed height (I think!).
Anyway, the site body is just white, with a border of size 1. Basically, the size of the body is determined by what's in it so, for example, it will resize automatically as more things are added.
What I want is vertical scroll bars so the body doesn't extend forever (is that right?). Should I have a fixed body size?
If you want vertical scroll bars you can use this in your CSS;
body {
height: 900px;
overflow-y: scroll;
overflow-x: hidden; /* hides the horizontal scroll bar */
}
What are you trying to accomplish? You sound unsure if you even want the scroll bars; is there a reason you want to show the scroll bars instead of just having the browser handle the scrolling when the content gets larger than the window?
Yes. You need a fixed height
body{
height: your-height;
overflow:auto;
}
will generate scroll bars only when you overflow the area without growing it vertically.
So, in your body create a layer:
<div id="mainbar">
</div>
And using CSS you can set the height:
div#mainbar {
min-height:100px;
overflow:auto;
}
The min-height guarantees the initial height that you need. Once it goes over that, it you will automatically have scrollbars. If you would rather the page itself scroll and the body lengthen, just take out the overflow line from the CSS.
If you want the vertical scroll bars to an inner div on your site (like so you can have a footer visible at all times), simple specify the height of the div:
#inner { max-height: 300px;
}
I think the default for the overflow is to scroll, but if your content is cutting cut off with no scrollbars, you could also set
overflow: auto;