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

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/

Related

HTML/CSS Navigation not pushing down: After responsive display not displaying full height and scroll

I have a navigation bar which does not scroll after display in responsive mode.
I will provide you with a link to my website: WebSite Link with navigation bar example
Just resize the window to a maximum of 500px and click the navigation to open menu.
Click the submenu's and you will see that it will not display all of the navigation content and also displaying over the website's content.
I want to make it show all its height and push down content also.
Well, the submenus are too long to be displayed, so the people who created the theme/template made these dropdown containers 200px high and enabled scrolling in them (you CAN scroll down in them). This is written in the following CSS rule:
.menu > ul > li > ul {
position: relative;
overflow: scroll;
height: 200px !important;
}
You can take out the last part, which will show the fill length. However, this will go beyond the bottom of the screen and NOT scroll, so you'll be better off with the given situation. You can also change the pixel value in height: 200px !important; - this will make the submenus a bit higher, but that doesn't make it much better.
I would leave it as it is and maybe add an icon that makes it more obvious that the content of the dropdowns can be scrolled.

ScrollBar on Top of Html Content

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.

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.

Getting overflow-y:scroll to work with fixed positioning html & css

I have a Jquery tools scrollable thats set to be fixed to the bottom of the browser window.
All I want to happen is for the page to be able to scroll vertically when the browser is less then 700px high. (so no content gets hidden, as its all fixed place). This feels like it should be simple but its causing me huge headaches. js solutions are fine at this point.
Thanks in advance.
http://www.vagabondbrigade.com/staging/berns/
If you are referring to the content that is being cut off at the top of the page, I would recommend putting top and bottom margins on your css page to the proper elements to harness their positioning.
You could do a fixed height or width for the main structure of the page and then the other elements that you want positioned, position them accordingly.
example:
/* html */
<div id="main_structure">
<div id="content">
blah blah blah
</div>
</div>
/* css */
#main_structure {width:100%; height:700px; margin:20px 20px 20px 20px; padding:20px;}
#content {width:200px; height:200px; padding:10px; margin:20px;}
Playing with Firebux on your page (the link that you've provided), I've added at div.floor_items a property overflow:auto; and the problem was fixed ;)
The content was bigger that my test screen resolution, and the content wasn't all visible, but with that change, the scroll bar appeared and allow me to scroll and view the "off screen" content!
This is your solution, if that was your problem!
Have you tried using css media queries
either by adding overflow-y: scroll to html or your containing element?
http://www.w3.org/TR/css3-mediaqueries/
#media screen and (max-height: 700px) {
#your_element_to_scroll {overflow-y: scroll;}
}
This will not work in older version of IE.