I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
Related
I'm trying to get rid of the iFrame scrollbar and give this task to the container div. The thing is that I'm using margins so I don't like to have the scrollbar in the middle of the page. I would like to move it o the very right of the screen.
Is there any way to achieve that?
my code is:
div#content {
background: white;
left: 3%;
right: 3%;
bottom: 0;
top: 80px;
position: fixed;
}
On the iFrame I have added
scrollbar = no
but then I cannot see the whole content.
Any help is greatly appreciated.
You need to set the size of the iframe. Then the container div needs to have overflow-y: scroll
Here is an example: https://jsfiddle.net/cj771ry7/1/
I have a page like http://codepen.io/meek/pen/NNprYb
My problem is that the footer is not staying at the bottom of the page, only at the bottom of the first section.
HTML for footer:
<footer class="row-footer">
<div class="container">
<div class="row">
text
</div>
</div>
</footer>
and CSS:
footer {
width: 100%;
bottom: 0;
position: absolute;
height: 50px;
background-color: #ccc;
}
No matter what I try I can't get it to stay at the bottom. I'd like for it to be at the very end of the contact section.
clarification: I don't want it to be fixed, I just want it to be at the very bottom of the page.
Remove the height:100% from #content
Remove position:absolute from footer
Setting the height to 100% will only make it as tall as the windows/screen height. Removing it will make it "auto-expand".
Codepen Link
footer {
width: 100%;
bottom: 0;
position: fixed;
left: 0;
height: 50px;
background-color: #ccc;
}
OR
just do the following
Wrap the entire html inside a div lets call it wrapper
then
footer{
position: fixed;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
height: 50px;
background-color: #ccc;
}
This piece of code just calculates the top value of your footer div
Ok, using position: absolute; on footers is generally never a good idea since the footer no longer will move relative to the rest of the content on the site. I understand that you do not want to use position: fixed; since this will not give you the results you are looking for.
Your #content div currently has a constant height of 100% which will push the footer to somewhere in the middle of the content.
My solution would be to use a min-height: 100%; on the #content div and remove the position: absolute; (and bottom: 0;) from the footer.
Result: The content-divs' height will adapt to be more than 100% if more content is added. It will always be at least 100% and therefore the footer will always be pushed to the bottom of the page, even if the content only fills half the window size.
How would i go about making the div i am using to contain the page stretch all the way to the bottom of the page.
You can see that here: http://csgoshack.com/shop/index.php?page=cats The white div don't go all the way to the bottom of the page this is making it ugly.
Whats the best way to go about making this always stretch to the bottom of the page relative to the browser size?
Thanks.
If you need any code of the website to help me do this please ask.
EDIT Right all i really want is that white bar to stay static over the background and then let the products scroll over the white box so its always in the center of the page how is this possible?
I would move the top bar outside of the whitebg as it might make this easier.
Set your body:
padding: 0;
Set your .whitebg:
position: relative;
left: 50%;
margin-left: -625px;
top: 0;
padding-top: 60;
height: 100%;
You'll probably notice how you have a scroll bar on the right even when it isn't necessary. I think moving the top bar out of the whitebg will remove your need for the padding-top: 60 which should help get rid of the scroll.
** EDIT **
If you move the top nav bar outside of whitebg I think it works well leaving a lot of your css as-is.
.whitebg
position: absoulte;
left: 50%;
margin-left: -625px;
top: 50px;
padding: 10;
height: 100%;
** EDIT #2 **
The key here is to get your background to encompass the area you desire. Then user other inner elements to handle positioning of the contents within. If you try to add a margin or padding onto the outer most background element, you'll find that it will exceed the desired size since those will always add on to the height or width.
.holder
remove the padding-top
.whitebg
remove all padding
.bodycon
add margin-top: 50px;
change margin-bottom to a normal margin
.fotter
add a margin if desired
Try setting height: 100% on .whitebg selector
Just inspected your page..try to set the bottom: 0px; to your whitebg class
.whitebg {
..your existing code..
bottom: 0px;
}
First ill ask why you have all meta tags in body?:)
If the blue bar is fixed position you can try
html, body{
height:100%
}
.whitediv{
height:100%;
}
Or just doo simple jquery:
var docheight = $(document).height();
$('.whitediv').height(docheight);
And make it as function on window.resize
This Code should help you,
.WhiteBag{
height : 100Vh;
}
Ask if you have any doubt
Add these in style
.whitebf
{
height:800px;
width:100%;
}
this one in your footer
footer
{
position:absolute;
bottom:0px;
}
I want to make a sticky footer like the one I made in this example.
http://codepen.io/Kenny94/pen/JvtFs
html, body {
height: 100%;
width:100%;
padding: 0;
margin: 0;
position: relative;
}
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
The problem is it doesn't work right in my current project. It sets the footer behind the body but if I start to scroll it appears. If I watch the size of the body in chrome it has a height off 970px but the whole site is much bigger because of the post. It seems to me that the body didn't expand like the Blog Post Wrapper. I set the BG-Color to grey in the body and that fills the whole page. I have no clue why it dosen't work with height 100%. I could set the height to 4000px to fit with the content and everything else but thats not a real solution.
I'm not exactly sure what you are trying to achieve.
-If you are wondering why the footer is placed behind the body, it's because you set
z-index to -1.
So the fix would be this: http://jsfiddle.net/bmpy6/
-If you don't want to have it visible when scrolling (so to say, keep it fixed at the bottom at all times), this should be what you want: http://jsfiddle.net/bmpy6/1/
For that, you omit the position: fixed;.
You don't need to set your height on the html tag or the body tag. It will flow with the content. You're setting the min-height of the main div to 100%. This will take up the rest of the remaining space when a view is loaded pushing the footer off the screen. You can either change the height of the main div or make the footer position fixed to the bottom of the screen if you want it to be sticky as in stick to the bottom of the screen.
Change :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: -1;
}
To :
footer {
background:green;
height: 60px;
position: fixed;
bottom: 0;
left: 0;
Right: 0;
z-index: 1;
}
Just changing the z-index will bring your footer to the front. Remember that the Z-index basically gives your id's and classes precedence over one another in terms of their visibility.
You do not need to set the height at all. Try this:
div {
font-size: 30px;
margin-bottom:60px;
background: red;
}
Instead of:
div {
font-size: 30px;
min-height:100%;
margin-bottom:60px;
background: red;
}
You see, when you tell the page to have a height of 100%, you are telling it fill 100% of the screens height. When you remove the height,(In this case it was a min-height so it will expand if needed) the <div> expands to the height needed to hold the content.
See this JSFiddle for a working example
Hope this helps!
I am trying to create a footer that is responsive and sticks to the bottom right of a page but can't get it to work consistently when a absolutely positioned div is on the same page.
The code I am using can be seen at:
http://192.241.203.146/sample-page/
I have tried:
position: absolute;
bottom: 0;
right: 0;
margin-bottom: 10px;
margin-top: 40px;
As well as:
float: right;
bottom: 0;
right: 0;
margin-bottom: 40px;
margin-top: 40px;
To get it to work, but it does not respect the absolutely positioned content on the page when it is resized down to mobile. It clashes like so:
I know that using position:absolute means that the div is removed from the flow of objects but I need to use it on the element in the middle of the page to avoid the objects jumping around when I use jQuery fades.
I suspect this is because it is not inside a span or row as per the bootstrap base I am using. Is that the problem?
I'm at a loss here - any guidance appreciated :)
Your problem is that the div is normal to the page, but his position is absolute. Inspecting your code i saw this:
if you want the footer is always visible in the bottom, you can wrap the footer to the div which width will be 100% of the width of the page. Like this:
div#footer_container{
min-width: 100%;
min-height: 100px;
position: relative;
}
div#footer_container div#footer{
position: absolute;
right: 0px;
bottom: 0px;
}
Result:
Red - main container of your page, Green - container of your footer (its always will be after the main container), Blue - your footer.
P.S. sorry for my english :)
I think I've found it!
Try this:
.main {
padding-bottom: 140px;
}
It works for me even if I reduce the width of the browser.