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.
Related
So I've just finished developing this design just for practice. And everything is just like I wanted except for the fact that SOMETHING is larger than screen size. I've inspected the page inside the browser, checked all margins and widths, but can't seem to find what's causing it.
I have a .container div that's 1280px wide with auto margins, so it'd always be centered and everything is inside it. And that container is inside the <body>.
Here's the link to my zipped project. It's only a few KBs. Just one page.
http://files.fm/u/aguxkzq
The position style attribute of .laptop h1 is causing the problem.
.laptopimage and the next h1 need to be position: absolute because they need to be positioned in relation to its wrapper which is position:relative.
You'll need to refactor this section.
I'm working on a website in which sometimes the pages might not cover the entire height of the screen (due to less content), which creates empty white space below the footer. I'm trying to solve this by always keeping the footer below the viewport. I've tried many ways to do this, but all of them solve one problem and create another.
Here is a jSFiddle for what I have so far.
The only time it actually worked was when I set height:100% to the body and html, but this makes the content overflow the body in the DOM, which I'm trying to avoid. Also, because the site needs a boxed layout, I need to wrap the page-content and footer with the #page-wrapper div as used in the code.
Please let me know if there is a way to achieve this, with the given markup.
Thanks!
Edit: Here is a slightly updated jSFiddle
I think you can do this by absolutely positioning the footer and making the page-wrapper relatively positioned. The catch is that you'll have to size the page-wrapper using JS based on the height of the HTML element. Something like:
$('#page-wrapper').height($('html').height());
but you may need to tweak the position quite a bit unless you use
* { box-sizing: border-box; }
When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2. How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css
If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.
If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.
Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.
What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.
There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.
... phew, hope that makes sense, let me know if now.
I just had a quick look at your style, what I saw is technically very ugly.
You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space.
I would say you have the wrong concept of styling / structuring the page.
Try to use "position:absolute" very rare!
Give a height to the .devices class:
.devices {height: 520px;}
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
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.