I have a div (lets call it header), and another div (lets call is content). Now, the content div extends its height to its contents. Within header, i have an element that overlaps far into content, but content div doesnt extend with the elements overlapping from header. Heres the css i have so far:
.content {
height:auto;
}
Any suggestions?
http://jsfiddle.net/pgvZr/
header and content are siblings, so there is no way to have content expand with content that is part of header using just css
To solve your problem, you can:
use javascript to calculate the height content should have and set it dynamically
put header inside content and remove the fixed height of content
I'm not sure i understand the issue. You want to extend content height by adding text to header_inner?
The reason your "content" div isn't being pushed down is because you have a height set on your "header" div. So, relative to your "header" div, your "content" div is starting 100px down. If you don't set the height, then the "header" div ends up being the height of whatever is contained within it.
Take a look at this fiddle... simply removed your height: 100px; off the header and it accomplishes what you want. http://jsfiddle.net/pgvZr/4/
Edit: If you're adding content to the header and want it to be part of your content div (i.e have your content div grow with the header_inner text), then you should probably just move it into the content div. Otherwise, then you shouldn't specify the height on the header, and let it automatically push your content div down when you add the header_inner like my fiddle does.
That's because the child div has a higher z index than anything else, meaning its stacked way on top of everything and it doesn't participate in the document "flow" due to its positioning. I suggest use JQuery to calculate and set its height based on the heights of the other two divs.
Related
I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.
I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.
Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?
Any help is appreciated.
Thanks in advance!
If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.
The fixed header seems to have a natural height of nearly 20px.
So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.
Try adding this to your CSS:
div.list { margin-top: 20px;}
This will push the div containing all the list items 20px from the top.
DEMO: http://codepen.io/anon/pen/EVWYJd
UPDATE
The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.
This issue has been addressed in these posts:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Creating a variable height "fixed" header in CSS with scrollable content
Take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/5/
Here, I'm stretching the content div to 100% height and it's working fine. However, when I have some really tall content within the content div this happens: http://jsfiddle.net/2YbpZ/2/
As you can see, the content div cuts off at the bottom of the viewport when I want it to carry on with the content inside it.
I know why this happens, because its parent element (html and body) are set to 100% height and it can't go more than that. To fix this I add a wrapper div and now it works: http://jsfiddle.net/2YbpZ/4/
But now there's another problem, when the content inside the content div isn't long enough to stretch outside of the viewport the content div doesn't stretch to the height of the page, like so: http://jsfiddle.net/2YbpZ/4/
So, the question is, how can I adapt this to make the content div always at least 100% height?
Dont use a wrapper, but use min-height:100% instead of height:100% on your #content div.
Note: IE6 does not support min-height.
http://dev.epicwebdesign.ca/korokriver/
It's been a long night. I'm having issues the grey metallic div on this page. I want the height to be 100% of the content. When I set it, it is set as 100% of the window height and falls all over the bottom of the page.
I have set 100% height on html, body, and every div leading to this one (site, copy, content, metals)
I should clarify, I explained that badly.
I want the grey child div to be the height of the site, and the height of the parent div. Not the height of it's content.
It's also happening with the other pages, though a different div.
http://dev.epicwebdesign.ca/korokriver/?page=geologicalconsultants
You could add overflow:hidden on #content. That should do it.
If you just want the div to wrap to its contents:
Remove height:100%; this is currently setting it to be 100% of the window.
By default divs wrap to their content unless floating child elements are not cleared properly, so there should be no need to set a height.
You could use jQuery to set the height of the child to the height of the parent like so.
$('#child').height($('#parent').height());
http://jsfiddle.net/ZXc3P/
I have a page with divs 250px x 250px which are all positioned absolutely, when one of these divs are opened an ajax call is made which expands the div to show all its contents, these divs are restricted to 600px in width but can be any height depending on info being presented so when a div has alot of content it seems to stretch over my footer which is understandable due to the fact that the widgets hovering on the page.
My question though is can I somehow set my footer to clear this large widget as it seems to be stretching over it?
There is no way of clearing an absolutely positioned div, absolutely positioned divs are taken completely out of the document flow. You can have a look at using a sticky footer which should keep your footer at the very bottom of the page which should visually fix up your page as the footer will no longer abruptly end.
However unless you restructure your HTML or use some javascript to check the height of the div, you wont be able to have the footer appear nicely underneath the div using pure CSS.
I have a page with two divs on it which should fill the entire screen.
Both of them have width = 100%
The upper one's height should be defined by its content (the minimal possible height that fits all content) and never show any scrollbars.
The lower one should fill the rest of the screen. However, if its content does not fit the div, it should display the vertical scrollbar.
Like this:
<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>
How do I do it with CSS?
Update:
I'm looking for a solution that would not require me to set the fixed height for the upper div.
Is that possible?
this should fix your problem
#header{ overflow: hidden }
#content{ overflow-y: auto }
edit: you have to define the height of the divs aswell
In order to do it with CSS you need to define a height on the bottom div, and then add overflow:auto.
.content {
height:90%;
overflow:auto;
}
Unfortunately, this means that your top div will need a height defined as well, because content will have to take up a predefined amount of space on the page. If you use percentages for height, then you will need to define a height for your header div so stretching and shrinking the browser window doesn't cause issues.
The only way I can see you achieving this is through Javascript. I know you didn't tag/ask for JS but I can't think of a straightforward, elegant CSS solution.
With JS you could capture the onpropertychange event of the header div, check to see if the property changed was offsetHeight/clientHeight and adjust the top style property of the content div. The content div would also need to have position:absolute; and bottom:0px;.
Sorry if you're not interested in a JS solution, I just don't think there is a CSS one without accepting a user experience below what you're trying to achieve.
You should define fixed width for second div and use overflow css property to define scrollbars.