I have a problem.
Screenprinter of webpage and code is attached.
PROBLEM:
The footer div will not vertical align 100% at the bottom of the page. As you see on image there is some space between the footer div (in red) and the bottom of the page. You also see the yellow main body div under neath the red footer div (the red footer div should cover the yellow in bottom. What can i do to achieve that the vertical align of the red footer completly at the bottom?
iMAGE OF WEBPAGE,CODING IN THE STYLE-TAG AND THE MAIN BODY OF THE "HTML" PAGETHE
Appreciate help with which content to change or add coding.
There are a couple of mistakes in your code.
First : Do not include any inline css, unless you absolutely need to give that style preference (mostly happens in case of using frameworks). Do it in a css file.
Second : target the id in your css using # symbol. like #FooterDiv. If you want it to be at the bottom, use bottom:0; not top:300;
Third : Understand the difference between position:absolute; and position:fixed;
position:fixed; will fix your div at the bottom and it will always be visible even if your content is scrollable.
position:absolute; fixes your div to the bottom of the parent that is set to position:relative; (in your case that is ). If your content in the parent div is scrollable then it will be visible when you scroll to the very bottom of your parent
You overwrite the properties. In the HTML code you set a top: 300 that overwrites the bottom:0 from the CSS file.
Make sure you put # in front of your element in the CSS file: #FooterDiv
Try adding margin-bottom: 0px; to your style.
Or padding-bottom: 0px;
Related
document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!
Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }
So, I have a header that needs to appear at the top of every page when the user prints this website. I'm setting position to fixed to get it to appear at the top of every page, but the problem is that the header is now overlapping some of the content near the top. The header is a static size, so if I could just put a margin X number of pixels at the top of every page that would solve my problem, but I can't find a way to do that. Thanks.
Example code:
HTML
<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>
CSS
header {
position:fixed;
top:-10;
height:20px;
}
#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}
The "top:52px" worked to get the content to avoid the header, but it was also causing some lines of text to be cut off in the middle by a page break, which is why it's commented out.
New info:
Something interesting I discovered about the "top:52px" line: it's not actually moving the content down 52 pixels, it's somehow hiding the top 52px of content on every page. I noticed this when I set header display to none and noticed significant portions of my content still missing.
Note: I'm open to javascript or jquery solutions if one exists.
Finally figured this out:
#content {
position:relative;
display:table;
table-layout:fixed;
padding-top:20px;
padding-bottom:20px;
width: 94%;
height:auto;
}
This puts padding at the top and bottom of every page, does not cut any content off from the top or bottom, and allows #content to respect width adjustments so that content doesn't get cut off on the right side of the page.
Lots of different ways to do this, one quick way would be to just use a div tag and set the margin-top to however many pixels you want:
<div style="margin-top:20px"></div>
simply add to #content:
#content {
margin-top: 50px; // however many pixels you need
}
I think you should read about CSS #media print and #page rule margin property here.
In my case, I only added a padding-top: XXpx and that was it. The css worked fine in all pages
html:
<div class="div_fixed"></div>
<div class="other_content">
content goes here
</div>
css:
.div_fixed{
position:fixed;
height:40px;
}
.other_content{
height:200px;
}
The div_fixed will remain fixed at the top position of the page.
But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .
In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed
How to achieve that ?
EDIT: no scroll bar should appear for any div
Use overflow: hidden to get rid of scrollbars
Is this what you're looking for? http://jsfiddle.net/BCRPa/
I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.
So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.
If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.
All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.
I have a div that is the body of my site, inside that div I put a div on the left side (to have a vertical menu)
http://www.freeimagehosting.net/uploads/117f79fa0e.png
http://www.freeimagehosting.net/uploads/4569a5f550.jpg
My question is, how can I make the menu div follow up to the bottom of the body div so that it doesn't look like it was cut, because of the color the menu div has...I've played around with properties like position, margins, float, yet I can't seem to get it to work...
I've included two pics so that you can see the divs!
Sorry pics don't appear because i'm a new user!! i've included links though...
The first picture is the inital page, and the second is after content was added and the body div expanded to make that content fit!
Any help appreciated!
This technique has always worked for me.
See http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
The background is actually on the wrapper of the two columns though.
This is really something best approached with CSS.
Say this is your structure:
<body>
<div id="main">
<div id="leftSide"></div>
</div>
I think what you'd want to do is give the left side a height of 100% in your CSS:
#main {
height:500px; /*this can be whatever height you want for your main div*/
width:700px; /*same with this, for its width*/
background-color:#F00; /*just to show you the effect*/
}
#leftSide {
float:left; /*THIS is where the magic happens, to "pull" it to the left*/
height:100%; /*This makes sure it reaches all the way to the bottom*/
background-color:#00F; /*or any color you'd like (which is a great song btw)*/
width:200px; /*or whatever height you'd like*/
}
This all assumes of course that you don't have extra margins and padding on your divs or other elements. You also might want to consider a "CSS Reset" like this one