An element has overflow-y: auto property, it's parent has height:calc(100vh - variable) and position: sticky and both of them have their size rendered properly, but the scrollbar "falls out" of it's element (see the screenshot).
Any ideas how this is possible and what can be done to avoid this behavior of scrollbar? Apart from "ditch the QAs with such bugs", that is.
If I change the parent's height property to 100%, the issue disappears, but it needs to have a fixed height in order for position: sticky to work.
Related
I have tried a dozen different solutions and nothing seems to work.
http://betelec.ergonomiq.net/societe/offres-d-emploi
On the page above, I want the teal background of the left sidenav to extend to the height of the white container around it.
The white container gets its height defined by the height of the largest child div (in this case, the mainbody).
I have tried setting the sidenav's div height to auto, but the div remains fixed height. If I set the div to a very large number like 10000px and have overflow hidden, nothing gets hidden.
I am completely at a loss.
Set parent element to position: relative; and then the child element to position: absolute; height: 100%;
Live example.
http://jsfiddle.net/pQdAr/
It looks like your left sidebar is positioned by float:left.
The following post may help you. How to match height of floating sibling divs
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
I have a ul that's the height of the page. I'd like it to be able to scroll inside of that ul. That can be seen here: http://d.saew.it/pRyz
As you can see, it can scroll as the height of the page. Now, I also want it to have a header, as you can see there. It should be "fixed" on the top, but the width of the ul list is variable, therefore I can not set it to fixed as it can't be centered in a parent of variable width.
Now, what I have works almost perfectly, except for the fact that the height: 100% of the ul to be the height of the parent (same as the window), while the div header still takes up space above it. Therefore, this throws the ul a few pixels off the end of the parent element. Check it out: http://d.saew.it/NXL1
Is there any way of accomplishing what I'm trying in pure CSS?
Edit:
The code is in stylus, but anyone should still be able to read it:
div.ul-header
background-color #E6E6E6
text-align center
margin 0
ul
background-color #E6E6E6
height 100%
margin 0
overflow-x hidden
All parents of these elements have height: 100%; on them to allow for it to reach the window's height.
I'm not totally clear what you want, but this is my best guess.
Basically what you're doing is using absolute positioning and overflow rules to control what scrolls, and where it appears.
The container holds both the header and the scrollable list, and has height: 100% within the page body. It also has position: relative so that its child elements can be positioned absolutely.
The child elements - the header and the list - both have position: absolute. This is so that you can force the list to have a height that's both restricted (so its content overflows) and variable (according to the height of its parent), i.e. it should always be exactly the height of its parent, minus the height of the header. Note that the value of its top property needs to correspond to the total height of the header - including padding and border.
Then to get your scrolling list, you can just use overflow: auto on the list.
To get your centered text in the header is as simple as text-align: center, which will work no matter the width of the container.
Have a strange problem (strange because I do not understand it)
Trying to use jQuery UI Tabs with 100% height and a vertical overflow scrollbar for the content.
This does not work - the scrollable area is bigger then the visible area resulting in the lower part of the scrollbar to be below the visible area. Looks like the scroll area is extended with the height of the list area.
The problem is only valid with 100% height (have testet this in different ways). As soon as I set a fixed height (in some way) the problem is gone???
Have after some test found out that the UI is not to blame and the problem is also valid with native list items.
My setup is this:
I need to use all available space (complete iframe, div, window)
I do not know the height of the top list.
I need to use the remaining space for content with vertical overflow
Will not use a script to modify the height (must be possible with CSS and HTML5 alone)
You can see a demonstration here:
http://jsfiddle.net/beasty/6cAat/10/
Any suggestion on how to fix it?
Thank you
Benny
The css property height: 100% has no effect on relatively positioned elements.
<div style="position: relative; height: 100%; border-style: solid; border-width:2px;">
<div id="contenttab" style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow-y: auto;">
Looong text
</div>
</div>
Here's a slightly better way to do this. You'll still have to determine the height of the list above the absolutely positioned div.
This is because the top-level div element has its overflow hidden. Its child div element extends beyond the height of its parent because its height is 100%. The browser calculates the height of the parent, which in this case is 643 pixels. So the child is also 643 pixels, even though it has to share the visible space with the unordered list, which is 60 pixels in height. Therefore, 60 pixels of the child div element is hidden from view.
As a solution, you could set the height of the ul to 10% and the child div to 90%. But be careful! You're using borders which aren't included in the height declaration, so you'll still lost a certain amount of the child div exactly equal to the number of pixels of border you're using. Also, if the ul ever grows, its contents could be cut from view as well. It's probably a better idea to not specify a height for the child div or the ul and instead allow the parent div to overflow-y. Otherwise it kind of seems "frame-y".
Is there a way to set a minimum height for a div, but still allow it to be expandable?
For example, I want a div to have an exact height of 300px when my page loads. However, if more content is added to the div with javascript, I want it to expand after that.
If I specify a height and the content expands past the div, it either clips or adds scrollbars, depending on the value of overflow.
If I don't specify a height, it only expands as far as the content.
Thanks
Here's the solution I used to fix this on ie6, courtesy of Dustin Diaz
selector {
min-height: 300px;
height: auto !important;
height: 300px;
}
The CSS property min-height does exactly this. Note that it does not work properly in IE6, however IE6 treats the height property as min-height, so you can use IE conditional comments to set a height property in a style sheet that is only loaded by IE6.