My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it?
A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set a margin-bottom to your contents div with the same value (or a little more to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to present that.
Related
Example: http://jsfiddle.net/3p9urx4y/
I am trying to make mobile navigation that has to be placed under the header. But if I am specifying the next properties:
.list {
top: 50px;
overflow-y: scroll;
}
The last 50px of the content is missing because top property is not zero. I was trying to make the outer div with padding-top of 50px, but in this case scrolling appears at header area and this is not expected behavior.
We could specify the margin-bottom of the last list child and that helps:
.item:last-child {
margin-bottom: 50px;
}
But that is the trick and I am trying to find better solution.
I have found this question Scroll part of content in fixed position container but I need something different. My header has to be fixed and navigation menu has to slide from the right side when user clicks the navigation button.
Edited: http://jsfiddle.net/3p9urx4y/ new example
Your .list has height: 100vh, so it will occupie the equivalent of 100% of the screen's height no matter its position.
One solution would be setting the list height to calc(100vh - 50px). I've edited the fiddle.
The calc function allows you to execute calculation when specifying a css property. More information here.
Give the header a position of fixed, a height and a width, don't forget to give it a z-index...then your navigation below it should be fine I can toss it more suggestions it you need me #cheers
I'm rather new to html and css and I'm currently stuck with two annoying problems.
Unless my header's position is absolute it won't cover a small area above and beneath itself. But when the position is absolute the container beneath it partially goes behind the header.
I want my header to cover the same area as it does when it's position is absolute, but I want the container's position to automatically be right beneath the header.
When I divide the footer in half, for "Start" to be on the left side and "Contact" on the right side, and add the Copyright part as a float:right everything else on the line gets pushed to the side.
I want "Start" and "Contact" to expand from the middle, out to the sides, while the Copyright part is to the far right. Everything on the same line.
The header's opacity is only to show the problem.
The line in the middle is to make sure the footer's text is in the middle.
I want to avoid a scroll bar.
https://jsfiddle.net/swvyrLnf/
header {
width: 100%;
opacity: 0.5;
position: absolute;
top: 0;
background-color: black;
color: white;
text-align: center;
}
For the header: Set the header height to 100px. Then set the margin-top of your body to 100px.
For the scroll bar: This is partially determined by the height of the body. If you want to avoid the scroll bar then you will probably need to change the body height from 100%.
For the Contact/Share links: I'd add padding left/right so that they separate from one another. To make them stretch farther you could change the size of the text. Another option would be to put them in a container of say width 40% and make the whole container a link.
The header should have overflow: hidden; and then you are fine. It's because the items inside have margin that extends the container.
I cant seem to find how to place a div (footer) at the bottom of the PAGE not the SCREEN. Many answers I saw say things like absolute of fixed but that brings the footer to the bottom of the screen and in the middle of my page.
HTML
<div id="footer"></div>
CSS
#footer{
bottom: 0;
}
So to make the question short: How do I place a footer on the bottom of the page not screen.
do you think on sticky footer? :)
or you just want footer after content, just make
footer {
position: relative;
}
If you use position:absolute; the footer will be ON the other elements and will not follow the page's element order. Than, if you use position:fixed;, sure it will be in a FIXED position, and this is not your desired result.
So DONT USE position absolute or fixed;
If your footer is the last element of the page, it will be the last element of the page automatically.
If you get the html and can't modify it manually, you can do it with JS (and JQuery but it is possible without it): jsFiddle
$(function() {
$('body').append($('#footer').detach());
});
If you don't assign any style to your footer and keep it as the last element after your body content, it will remain at the bottom of the page.
Assuming your body content is too short to cover the full height of the page (for whatever reasons, maybe no content) but you still want to keep the footer at the bottom of the page, you can read this short tutorial or see the demo. If your content is longer than the viewport height, this footer will still remain at the bottom of the page and not fixed to viewport.
Basically you need to make the content or container above the footer to occupy 100% of the height of viewport. Then, place the footer after the content / container with the following CSS :
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
What happens here is that the footer will occupy 3em height but you 'pull' it back with the same value but negative margin-top. It's cleared to make sure there's no elements on both sides but you may exclude that.
Then, to prevent it from overlapping on your content, the container of content or content itself should have padding-bottom of the same value (in this case, 3em).
I have the following html:
<style>
body {
margin: 0;
height: 100vh;
}
div {
margin: 1px;
}
</style>
<body>
<div>feck</div>
</body>
The div's margin causes scroll bars, even tho the div itself is nowhere near the height of the page. Without the div's margin, there is no scroll bar. What's going on? Is this a browser bug?
Collapsing margins. Because the div is the topmost element in the body, the div's margin is collapsed with the body's margin. That is, the body gets the same margin too.
You may think that "collapsing" isn't the right word for this behaviour, and you'd be right, but that's the word they've chosen. Sorry.
There are several solutions:
Sean's solution of simply moving the div a pixel downwards
Your own solution of using calc for the body height
Set a padding on the body, and use box-sizing:border-box for it.
Because a div is a block element. It has positioning in the Dom, therefore takes up space. When you add a margin to the top, you are pushing its space down, therefore increasing the overall amount of space it occupies.
If you want to push the div down, without changing the overall container (body) height, you can give the div a position of relative, and a top of 1px.
div {
position: relative;
top: 1px;
}
Check out this answer it should be clear enough.
The main point is that margins of adjacent elements (in this case your div and body) are collapsing taking the maximum value of the two margins.
I have created this layout http://jsfiddle.net/6GVSu/ and the idea is to have centered container, which can have variable width, depending on its content. This is working just fine, but in this container I want to have header section which stays allways on top and the body container, which should fill the rest of the centered parent and show scrollbars if needed.
And now I am kind of stuck, I have tried to make this body container absolute positioned and stretch it within the parent, bud it will cancel its possibility to stretch the parent horizontaly.
And when I left it without positioning, it fills the rest of its parent as in fiddle, but it doesn't show the scrollbar eventually.
So please can someone give me some suggestion?
Thanks
You didn't set a height on the "body" class
.body
{
overflow:auto;
height: 300px;
}
Take off the height on the "innerPositionDiv" element
Updated Fiddle
You need to set the height of the <div class="body"></div> & set its `overflow-y: scroll'
Check this: http://jsfiddle.net/6GVSu/3/ updated
.body
{
height: 100%;
overflow-y:auto;
}