I'm using IScroll on a page that makes heavy use of ScrollMagic, but cannot for the life of me get IScroll to function. The primary issue appears to be that most (but not all) of the elements in the page need to take up 100% of the viewport's height, since they are set up as slides with some complex animations inside of them. In order for height: 100% to work, however, all the parent elements must be set the same. This is causing IScroll to calculate the height of the wrapper element at the viewport height, and thus it thinks there's no more content beyond that. I'm working on a jsfiddle to test/demonstrate the problem, but wondered if anyone else had run into a similar situation before.
The problem is that the height is always calculated relative to the next offset parent.
Since the inner iScroll wrapper must be positioned relative it is every child's offset parent and thus the basis for their height calculation.
There is a simple workaround though:
Instead of height: 100% use height: 100vh in your CSS.
Viewport units is something only few people seem to know about even though support for it is absolutely sufficient: http://caniuse.com/#feat=viewport-units
hope this helps,
J
Related
I'm using the technique outlined here to make a child div 100% width of the browser when the parent is not: https://stackoverflow.com/a/24895631/1184180
This works more or less exactly how you'd want it to, except the implementation of the spec seems to be to add the scrollbar width to the viewport width. So when there is vertical scrolling, the child element is at 100vw + scrollbar width.
This in turn causes the dreaded Superfluous Horizontal Scrollbar to rear its head, which is something nobody wants, ever.
Given that it is due to the behaviour of the browser it seems unlikely there's much that can be done about this - however, I'm wondering if anyone has come up with a genius solution?
The best I can see thus far is setting the width to ~98vw and putting up with the child div background not quite being 100% in width. This does slightly offend my sensibilities, though :/
I am using a table based layout (using display: table properties). The container has a dynamic height (I have set min and max height properties on the container). All the inner elements within the container have their heights set to 100%. The idea being that they will always fill the available space.
The problem I am having is that elements that have display: table-cell will continue to expand above the 100% allocated space if they contain content that is taller than them. This happens even if I set overflow: auto.
I have created a jsfiddle to demonstrate the issue. Please see here:
http://jsfiddle.net/eSRA8/
In this example, the max-height of the container is 300px, but an inner element called .tall-content has a height of 400px. This makes the container grow taller than its max-height.
In Chrome this actually works how I want it to. However it does not work in Firefox or IE.
Please note that since the container height is dynamic, I can't set a fixed height on any of the inner elements (unless it is possible to use jQuery to assign the correct height on document load and on window resize, but this would need to respect the min and max height settings of the container).
Does anyone have any idea how I can achieve the desired result? I would like to keep as much of the existing structure as I can but if the same result can be achieved in a slightly different way then I'm open to that. Either way it needs to work the same in all browsers.
That looks to be a limitation of display:table;
You may be able to put the "container" in another div with max-height:300px;overflow:auto;
Here's some info which might explain why you are having difficulty:
http://www.w3.org/TR/CSS21/tables.html#height-layout
I am having a problem determining which CSS class definition is stopping the left sidebar (the one with the pinkish background) from growing in height on this page.
I should have mentioned previously that I have tried everything I can think of and researched many questions on here, including adding height:auto; and overflow:auto; to col-left, sidebar, col-main and all others already.
Can someone help me identify it?
At a glance, I think the main problem is the use of position:absolute for .col-left. position:absolute causes that element to be outside of the flow of the rest of the page. The height of it has no effect on the resulting height of its parent (as if it were not inside the parent).
You have a lot of height values set to 100%, it took me going all the way to the page div class before I was able to increase the vertical real estate of your content.
I recommend evaluating whether you should be using that particular height property in so many elements, you may be constraining yourself with no reason.
Looking at the page source, the height of the element is not specified via CSS. If you would like the sidebar to grow, you would need to specify a height and/or min/max-height properties.
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.