I'm sure there is a simple solution for this, but I might have just been looking for it for so long that I'm overthinking everything.
Please see http://codepen.io/anon/pen/fusiw
I have an absolutely positioned div on my page (for simplicity, it's 0 from all edges in the codepen). Inside, there are three main elements:
a header, which can be of any height depending on content, and should always be fixed to the top of the parent;
a footer, which, thankfully, has a fixed height, and should always be fixed to the bottom of the parent;
and a middle area, which can have any amount of content, should span from the end of the header to the start of the footer, and is supposed to scroll if needed.
My problem is getting the middle area to always begin from the end of the header, and end before the footer. It's supposed to exactly fit whatever height is left between the header and footer.
I don't want scrollbars appearing anywhere else than on the middle area itself. My current solution is working in the sense that only the middle area scrolls, but because I am using height: 100% for it, the height of the header is added to it, which shouldn't happen.
Related
So I can't scroll down on my html page. I already thought of some things that might cause that but I still don't how how to fix it. I have a footer that is sticked to the bottom of the side and all the content is behind that footer. Some guy told me just to add body {padding-bottom: "height of footer"} but that doesnt work for me because my footer changes height if the screen res is something different.
My guess is your footer is position absolute or fixed(or something of the sort). This allows your footer to be displayed at all times, but other elements on the page will have no awareness of this (thus are hidden behind).
So you have 2 options:
option 1: allow footer to not show at all times, and
use something like css flex, where you can define your elements so that the middle content has flex-grow. (and likely some padding too)
option 2: add some sort of padding to the main content so that it leaves room for the footer.
If you can't be certain of the footer's size, you can always put in some restraints on your footer and have the maximum height be accounted for by your content. that way you will always be able to see all your content, worst case scenario you get extra white space.
ex: If your footer can be up to 20vh high, you can set the content to have a vh of 120. (You can also use padding or margins, whatever works)
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
I have no idea what is going on and can't figure out what is causing this.
This is the page in question: http://www.brandroot.com/resources
The sidebar is falling below the main content and the footer is not 100% across the page like the other pages on the site.
It looks like your sidebar is inside the wrong element.
Now its inside the <div class="left">
and it should be outside, after that element.
Your "main" isn't big enough to hold that column. I expanded the width to 850px and reduced padding on the right column and it came up.
Generally, if you float something right, it's better to put that content, the div that is floated right, above the content it's floated next to in source order. Then you just have an overall width on the wrapper and then on the floated object. The rest takes what it needs.
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.
My code is as below:
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
Here declared div working as a scrollable div but it doesn't resize as per window resize.
I have a situation where I need, on the same line, When the window is resized and the div's
eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.
Please Help...
<div id="frame1" style="display:block; width: 87.5%">
content
</div>
Height will increase based on content
Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.
I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.
Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).