I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
Related
I've just started learning CSS grid and have decided to try and build the technical documentation page challenge from FCC: https://codepen.io/freeCodeCamp/full/NdrKKL
In my implementation, I can get 85% of the way but I'm struggling to get the overflow to work correctly so that both the sidebar and the content can scroll independently. I think it might be a problem with margin somewhere but can't identify where.
When I apply:
overflow: auto;
to my content, it cuts off half of my HTML.
Where am I going wrong?
https://codepen.io/braedongough/pen/PVYvzR
For the sidebar, add a position: fixed; That is what basically makes the sidebar and content "separate".
For the content, add a margin-left: 200px; That number could be anything you want it to be. You need to do that or the sidebar and your content will overlap (because the sidebar has a fixed position).
Remove the height: 100vh; from content. It causes it to take up the whole screen and breaks the overflow.
I fixed your codepen for you: https://codepen.io/newracket/full/bzbyxJ
As the title suggests, I have two stacking <div>s.
They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.
Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.
The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)
Here are two images that describe the best what I'm trying to achieve:
"initial state"
a state with some more data in the top div
Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/
This is the kind of situation that display:flex handles extremely well. Update to your fiddle:
http://jsfiddle.net/60qan4t6/1/
Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.
Be sure to see check browser support for flexbox here:
http://caniuse.com/#feat=flexbox
If it's acceptable to set height to div's you can use such an example
.top-area {
background: red;
overflow: hidden;
height: 40%;
}
.bottom-area {
overflow: auto;
height: 60%;
}
http://jsfiddle.net/xqh2vw2g/
I have coded this just in html and works perfect,
http://akaleez.co.uk/Templates/3/
I then try to make it a wordpress theme and now my footer will not go full across the screen
http://lisas-nails.co.uk/?theme=twentytwelve1
only the bottom black part does.
I believe the root of the problem you're facing is actually a matter of certain elements expanding the page scroll horizontally to be wider than the visible content. First, to identify the offending elements:
One of them is #sidebar. I'm not actually sure where this came from in your WordPress variant, because it's not present in the original HTML you coded. Anyways, the problem is that this element contains a <ul> which is styled to be 600px wide, resulting in the additional horizontal scroll. If you have no need for this element, just delete it, because it doesn't look like you're using it for anything. Or, just remove the width:600px on the <ul> element, because that's the root of the problem.
The other problem element is the .left element, which adds together its width:100% and padding-left:190px to extend 190px off the viewport. I can't say for sure why this behaviour doesn't occur in your original HTML/CSS - it's possible that there's CSS other than what you originally wrote at play here, since the two pages aren't identical.
To fix this, you can instead rely on the default behaviour of a <div>, which extends to cover the entire width of its parent, rather than using width:100%:
.left {
background-color: #000000;
color: #FFFFFF;
height: 30px;
padding-left: 190px;
padding-top: 10px;
text-align: left;
width: auto;
}
(Above, I essentially just removed the float and changed width to auto.)
The reason why most your footer isn't expanding into the additional space on the right is because it takes a width of 100% - that is, 100% of its parent, which in this case is only as wide as the viewport. But this isn't a new problem, if you make your screen smaller in the original page, you'll see that the footer similarly will not extend into space off of the viewport.
Anyways, I hope this is what you were looking for! If it isn't, or you find parts unclear, let me know and I'll be happy to help further. Good luck!
Question
I'd like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn't artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.
JSFiddle
On request, here's a JSFiddle of my issue. Since there's really only one DOM element in the question, I think the fiddle doesn't clarify much. http://jsfiddle.net/AbEUe/5/
What doesn't work
#contentAndBackground {
padding-bottom: 900px;
margin-bottom: -900px;
background: url('my900pxHighImage.png') repeat-x;
}
The above ensures the whole image is shown, but the negative margin doesn't keep the unnecessary scrollbars away as I'd hoped.
#contentAndBackground {
min-height: 900px;
background: url('my900pxHighImage.png') repeat-x;
}
Same problem. The whole image is shown, but scrollbars are always showing.
I'd like to avoid using JavaScript that needs to handle screen resizing.
I think I did it: http://jsfiddle.net/AbEUe/7/
I have created 2 container divs, both have a height of 100%.
The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.
The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).
You can see you have to render the header twice, but that won't matter because the first isnt visible.
Edit:
Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/
Your question is not very clear, but this prevents your kitties from being chopped up.
#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}
I'm using http://ryanfait.com/sticky-footer/ to make footers stay at the bottom. I was previously using height: 100%; on html and body to make it fill the whole page when the page was smaller than the viewport. However, this makes the body stop (no background) after the viewport, but the rest of the page continues. Stocky Footer doesn't have much to do with it, but it's an example of the code.
I've tried using min-height: 100%;, but that's not working either. Can't figure this one out, any help would be great.
Edit
The website is http://www.markduffymusic.com/index.php
To ensure that the footer is always at the absolute bottom of the page you can use the answer provided in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
For this to work with background images, you must place the background-image on a single element that takes the full height of your page, which in this case is your #holder div.
You also have two floating elements in #pagecontainer which are not being cleared, meaning the browser will not assign a set height to #pagecontainer. To resolve this you need to as overflow: hidden to the #pagecontainer element.
Here is a useful CSS Tricks article about The How and Why of Clearing Floats.