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.
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I have a small web app I'm designing and I have a real weird problem. The inner content will always cut out below the page fold - you can't scroll down to read all of the text. I've tried this in Mobile Safari and on my desktop in Chrome/Firefox with no success.
The live URL is http://byjakewithlove.com/code/mobile-webapp/
Any suggestions I could try would help a lot. I basically have div with the ID #content and that holds the white BG and page text. I've got overflow: auto; which should create the scrollbar inside this div, and even have height: 100%;. I'm totally perplexed about what the issue is - again thanks in advance for any help!
you can keep the height: 100% on the content element, but position the header element using absolute positioning (don't forget to set their parent's position to relative, of course) to stick it to the top, while setting a padding value to the content element that correlates with the header's height.
the height: 100% is misused - "100%" refers to the container's height, so it's calculated for the parent, thus resulting this behavior.
simply omit the height: 100% declaration and set a fixed height.
I have situation like in following example (see in chrome):
http://jsfiddle.net/3fLP6/49/
There are div rows with some content and one div with variable content which should fill rest of available height. Everything works fine in Chrome/Firefox/Safari/Android/iOS but I cannot find solution for IE (I need solution for IE7+) is there any other way to acomplish this in IE?
I assume you mean that you want a header that always sits on the top, a footer that always sits on the bottom, and one div that fills the rest of the available space; no matter how small or large its contents are. I use these terms in the rest of my answer.
Well, there are to my knowledge three methods to do this in IE7+:
Use the position: fixed CSS property to position the header, footer and the body. This means you have to set the header to a top position of 0 pixels and the footer to a bottom position of 0 pixels. Furthermore, you have to set the top and bottom property of the body div to the height of the header and footer respectively. Consequently, this method requires you to know the exact height of both the header and the footer. Unfortunately, some older browsers (e.g. IE6) don't support position: fixed, so if support for those browser is important, you should go with one of the other options;
Use percentages to specify the height's of all the div's. Clearly, this is quite easy. However, if you want to set a specific height for the header and footer, that isn't possible;
You can also create a div width a height of 100% which will act as the body div. On top of that you position the header and footer div's using position: absolute (because of that, this will also work in older browsers). Then, you add to the body element two other elements: one div at the top and one div at the bottom. These div's have to be the same height as the header and footer respectively, because these two elements will make sure that the scrollbar is showed when necessary. Of course, you'll need to set overflow: auto on the body div;
Finally, you can also change the height of the body div using JavaScript when the window is resized. A big disadvantage of this method is that JavaScript is required, and therefore this wouldn't be my choice.
I hope I helped. Please ask any question if I wasn't clear (enough).
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.