I've seen a pile of ways to do this online, but all that I've tried either break other CSS on the page or don't work all together.
On this page http://www.psyklopz.com/workbench/ I would like to get the #container element to grow in height so that the footer touches the bottom of the screen.
How would you do that?
i visited the sight. Well if your content is just as short as that and you want to still put the footer touch the bottom of the screen. add this to your css of the div or container that you want to be at the bottom.
position: absolute;
left: 0;
right: 0;
bottom: 0;
You could also do:
HTML
<body>
<div id="container"></div>
<div id="footer"></div>
</body>
Styles
html,body {height: 100%;}
body{ position: relative;}
#footer { position: absolute; bottom: 0;}
The container div won't stretch the whole way down, but with clever use of BG colors you can make it look like it does.
Add height:100%; to both the #page and #contain divs. That will get you what you want.
Hi see the live demo:-
http://jsfiddle.net/BER5x/2/
you can use this code its fixed at bottom and without your footer top curve image its totally css border radius property you don't need to use the footer-top in your css.
I hope this will help you......
I ended up using position: fixed; and setting bottom: 0; top: 0; left: 0;. I then used a piece of jQuery .animate() magic to pull it off. Here's the working code and a demo all-in-one!
http://www.psyklopz.com/workbench/jquery-based-dock-toolbar/
I know it's an old post, but I found myself with a similar problem today.
I wanted to have a container (with a map) to fill the viewport, but there had to be a 32px high container above it. The map made it necessary, to really extend the container to its maximum possible size and to not overlap with anything else.
I ended up using a flexible and elegant solution without any javascript:
<div class="tab"><div class="tabContent" /></div
<div class="container" />
And the CSS:
.tab {
height: 0;
width: 100%;
}
.tabContent {
height: 32px;
}
.container {
height: 100%;
padding-top: 32px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The trick is using box-sizing: border-box to make the height: 100% include the defined padding.
I have also created a jsfiddle: http://jsfiddle.net/YWLLM/2/
I had to use a fixed body height in the fiddle, because (at least in chrome) in the iframe body height: 100% didn't work.
I also added some borders to visualize, that nothing get's cut off (with container overflow: hidden)
Related
How can I make a div and nested divs extend down to the full height of the screen with scrolling on the body?
Link to a fiddle: https://jsfiddle.net/qsczjd01/
CSS:
#megaAll{
box-sizing: border-box;
position: absolute;
background-color: gray;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
I need #megaAll (gray), #megaMain(pink), and #contentContainer to extend all the way down the page, but it seems unable to extend to the full height because of the scrolling on the body. I need the scrolling on the body and fixed sidebar on the right to remain.
Extending them down is just height:auto; which need not to be mentioned as it is default. Whatever will be the height of your body, it will auto adjust it all over the page.
"sidebar on the right to remain" means fixed, this will work if I got you right.
position: fixed;
Use
position: fixed;
instead. This will position the element fixed in the window, rather than fixed within the body element.
Figured it out! I changed my divs from using position: absolute, and then 0px all around, to using static positioning with margins at 0px.
New example div:
#megaAll{
box-sizing: border-box;
background-color: gray;
margin: 0 auto;
}
More info here: https://stackoverflow.com/a/11068062/5879337
I've just spent 3 or 4 hours trying to understand how to get a "symmetric" DIV inside an HTML page that has to be not scrollable.
The DIV must have the same margins from the window on all sides and must contain an IMG whose size should scale according to the window size maintaining it's ratio.
At the following link you can find the best I've been able to do.
As you can see the DIV has the right margins on the left, top and right size but not on the bottom one! Why not?
Is there something wrong with the DIV style?
<div style="margin: 50px;">
I hope it's quite clear, thank you for your help! :)
Edit: since on JSFiddle it doesn't appear as it should be I've just uploaded an image about what I get on my browser:
Edit 2: this is the link to the last working solution, thank you all for your help, in particular to dcardoso. :)
You should add to your body and html tags (doesn't work in jsfiddle) and remove 'overflow: hidden':
position: relative;
height: 100%;
and to your div tag (remove 'margin:50px'):
box-sizing: border-box; /*This allows for the div padding to be included in the height and width size */
height: 100%;
padding:50px;
The page is getting cut because you are using overflow: hidden; for html and body .
when adding style tag inside jsfiddle style, it is not working. so scroll is visible.
Ahhh, I think I get what you're saying. If the page is longer than your div the space on the bottom is greater than the 50px margin.
You have a couple of choices here, this is just one of many.
I'm using calc() to calculate the 100% width/height minus the 50px on each side.
html, body {
margin: 0px;
overflow: hidden;
}
.maxSizeElement {
width: calc(100vw - 100px);
height: calc(100vh - 100px);
margin: 50px;
}
/* OR YOUR COULD USE... */
.maxSizeElement {
position: absolute;
width: 85vw;
height: 85vh;
top: 0;
right: 0;
left: 0;
bottom:0;
margin:auto;
}
<body>
<div>
<img class="maxSizeElement" src="https://thelostdigit.files.wordpress.com/2014/05/wp_ss_20140507_0002.png" />
</div>
</body>
http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
I've got a simple page, and I'm trying to set a border on the bottom of my page's body in CSS like so:
body {
height: 100%;
border-bottom-color: #ad3127;
border-bottom-style: solid;
border-bottom-width: 5px;
}
This works great if I've got enough content to fill the whole window, especially when it needs to scroll: the bar appears at the bottom of the page (not the window. I don't want it to be floating over content or anything like that).
The problem is when there's not enough content to fill up the whole window, the bar just appears at the bottom of whereever the content ends. This sort of makes sense, but it's obviously not what I want.
I've tried something like
html {
height: 100%;
}
Which seems to work in both cases, except when I resize my window it gets mangled (at least in Firefox 4) and in Mobile Safari it renders at the bottom of my viewport (ie kind of just in the middle of my content). So this does not appear to be doing it for me.
There must be a way to solve this (with as little sorcery as possible, please :)).
Instead of height: 100%, use min-height: 100vh:
body {
box-sizing: border-box;
min-height: 100vh;
margin: 0;
border-bottom: solid 5px #ad3127;
padding-top: 1px;
}
<p>content</p>
Because of box-sizing: border-box, border of the body will be accounted in the body height. The only hack here is for content margins pushing the border below viewport, which is fixed with an arbitrary padding-top value.
Chris Coyier did an interesting article on body borders a while back. Here is the link for reference: http://css-tricks.com/558-body-border/
To do what you want, the most cross browser way would be to create a div that acts like a border, and then give it a fixed position of bottom 0. Something to this effect:
HTML:
<div id="bottom"></div>
CSS:
#bottom {
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
A little bit less hacky way, albiet less compatible with older browsers is to use pseudo elements:
body:after {
content: "";
position: fixed;
background: #ad3127;
height: 5px;
position: fixed;
left: 0;
bottom: 0;
}
I've have tried this:
body {height: 100%;overflow: auto; body #cornerImage {position: absolute;bottom: 0;}
and this:
{ margin:0; padding:0; }
html, body {
height: 100%;
overflow:auto;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
bottom: 0;
}
Neither of these have worked. It seems like the position I am wanting is working, but the problem is there a giant margin pushing my content down. Am I on the right track with this? Or is this not the fix I should be trying?
IE6 simply does not support position fixed. It's been a hassle many web developers have had to live with. I've used two alternatives:
Put the scrollable portion of my content in a separate 100% width/height DIV with overflow: scroll. Then overlay my non-scrollable "fixed" element in a separate div with a greater z-index.
Do what Yelp does with the map on the sidebar and reposition the element with Javascript every time the user scrolls.