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.
Related
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.
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.
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".
Here is my jsFiddle for the following question: http://jsfiddle.net/arelia/Rruxf/
I'd like to have a header that stays at the very top of the body and a footer that stays at the very bottom of the body. I have a content div (position: relative) between the header and footer, and when I set a margin around the div my absolutely positioned header and footer move from their top/bottom positions by the height of that margin (this also happened when I tried setting a margin above and below the paragraphs in the div). In the fiddle you can see that the footer is not attached to the bottom even though it's absolutely positioned (I went ahead and made the header static since static gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements? If the position: absolute elements are moved out of the flow why would anything affect their position at all?
I've tried searching here and Google for "CSS margin affects absolute" and a few other phrases to no avail. I discovered this while playing around with it some more in developer tools:
Metrics show the body is the height of the html element minus the amount of one margin (the margin that's still affecting the footer). So, the body must be stretching to the height of the content div since there is nothing else within the document flow within the body to define its height. But that height ends where the content ends instead of after the margin. Shouldn't it include the margin?
If I make the height of the body 100%, the footer positions
itself to the bottom of the viewport and then stays fixed in that
spot when I scroll. Why isn't it attaching itself to the bottom of
the body instead of the bottom of the viewport?
Answer to Your Two Last Questions
"But that height [of the body] ends where the content ends instead of after the margin. Shouldn't it include the margin?" Answer: No, the body height itself is unaffected by the bottom margin of an element within it.
"If I make the height of the body 100% ... Why isn't it attaching itself to the bottom of the body instead of the bottom of the viewport?" Answer: It is attaching to the bottom of the body because by setting height to 100% you have set the body to the viewport height.
Answer to Your Main Questions in Reverse Order
"If the position: absolute elements are moved out of the flow why would anything affect their position at all?" Answer: What affects their position is the position of that body element. In taking the answer to the first question above, that margin on an inner element can cause the element within the the body to keep off the bottom of the viewport, and thus cause the body itself to gap from the bottom of the viewport by that distance. Then, when you position an element to the body, it will be gapped because the body is not flush to the bottom of the viewport. This is what you are seeing in the footer area of your fiddle.
"How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements?" Answer: Adam's original answer of fixed is one method, based strictly off your bolded question (he has since modified it). However, you clarified in a comment that you really want is "If the content is short I want the footer at the bottom of the viewport. If the content is long I want it to follow the content and touch the bottom left and right corners of the page." Adam's original answer of fixed positioning will not accomplish that (as he also realized). Rather:
Do This
html {height: 100%}
body {min-height: 100%;}
div {
margin: 20px 20px 0 20px; /* eliminate your bottom margin */
padding-bottom: 50px; /* use bottom padding to get space for footer */
}
See short content fiddle.
See long content fiddle.
Looking at your commment I think I understand what you're trying to achieve. You can use this:
http://ryanfait.com/sticky-footer/
Here is how you could integrate it with your existing code:
http://jsfiddle.net/wJSZD/