I've read through tons of questions and articles and I can't seem to figure this out.
Here's a rough example of my layout structure:
body
- div 1 (header)
- div 2 (main content wrapper)
- - div 2a
- - - div 2a1
- - - div 2a2
- - - - div 2a2a (this div needs to fit 100% height of it's parent - div 2a2)
- - - div 2a3
- - div 2b
- div 3 (footer)
I believe my main problem stems from the fact that all the child elements of 2a are floated left.
All the answers I've found talk about adding 100% height the parent containers, including the html and body tags. But I can't just go through and add height: 100%; to all every ascending parent because it ends up breaking my layout. Specifically so, when I add height 100% to my main content wrapper, div 2.
Here's a jsfiddle I made that represents my problem quite well.
Percentage heights are calculated from the parent element, pixel heights aren't. That means you would need to set height on each level ONLY if all of the heights need to be in percentage.
You can set min-height on 2a2 with a pixel value, so it won't get any smaller than that, but it will able to expand beyond that value. And then you set height: 100% on 2a2a. This will work because the parent element(2a2) has an absolute value in px.
Edit:
To make the 3 divs fill the rest of the container regardless of the content, you have to use the padding-bottom, margin-bottom trick. Here's the codepen.
Just set the 2a2's position: relative and the 2a2a's position: absolute. You can then add top: 0; bottom: 0; and the 2a2a gets stretched to the full height of its parent.
a jsFiddle is always helpful: http://jsfiddle.net/REh4b/
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".
I've got a container that's set to a max-width:780px and height is undeclared. Inside the container, there's an image slideshow. Everything on the page is responsive, so as the width decreases, the image (who's width is set to 100%) adjust's the heights container.
The slideshow change's the images to display:static; and position:absolute; which no longer "holds open" the container because it's not seen as content of the container
Is there any creative solution out there to take the height of a child element that's absolutely positioned?
Example below has NO height declared on the main container.. nothing's holding it open.
http://dhut.ch/test/santos/
Thank you!
Are the images all the same dimensions? If yes, you can use a percentage padding-top on the element that contains the images.
So if your images are all, say, 760px wide by 500px tall, that's 500/760 = .65789
Which as percentage would translate into something like:
#main {
position: relative;
max-width: 760px;
padding-top: 65.789%;
}
The reason this works is because with padding if it's set with a percentage, it is calculated as a percentage of the width. As the element shrinks in width, the height will shrink proportionately and the box will remain in the same ratio of width to height. The images, positioned absolutely, won't be adding to the height of the box.
This'll work as long as your images are all the same aspect ratio and you're not expecting that ratio to change. If you'll be using a lot of random images, this isn't for you.
I recently had a similar problem with an image that I needed to absolute position at the top of a Zurb Foundation templated page in order to pull it out of the flow and reset its dimensions (Image had to stretch to edges of wrapper, instead be enclosed by its parent .row padding). However, of course, this meant that all the fluid responsive elements below it popped right up over the top of the image. Setting a margin-top or positioning the sibling elements below meant a rigid top space that didn't resize with the width of the browser.
To get around it, I placed a duplicate of the image right after the absolute positioned image and set its visibility: hidden; I had to add a little bit of extra margin bottom to make up for the difference in height, but the end result is everything on the page flowing exactly to the height of the image in use.
I've also used the padding trick described by unexplainedBacn above, and it's a great trick as well. It takes a little bit of math, but I voted that answer up. Great solution.
I think you'd better change your approach. For sliders, the best practices is to float child elements of the container, and also use one of the known techniques to prevent parent's great collapse. So, I suggest that you remove the position: absolute CSS rule from images and float them inside your <div id='main'>, then use any of these methods to force it to encompass it's children:
div#main {overflow: hidden;}
div#main:after {content: ''; display: block; clear: both; visibility: hidden;}
Add a <div style='clear: both;'> to the end of your main div container.
Remove the absolute position. I would avoid inline styling as well.