I've been searching around, but I can't find much help.
I have my footer placed at the bottom of the page using the absolute positioning method:
footer{
position: absolute;
bottom: 0;
background-color: #000;
color: #fff;
min-height: 100px;
padding:{
top: 10px;
bottom: 10px;
}
border: {
top: solid 2px #fff;
}
}
When I try to get it to push to the bottom of the page regardless of page height I still get behavior like this:
I've tried putting body height at 100%, as well:
html, body{
background-color: $background-color-primary;
height: 100vh;
}
body{
margin-bottom: 60px;
}
I do not want it to be fixed, as this is an undesireable behavior for the website, I just want to go all the way to the bottom regardless of the main content height.
It's a little unclear how you want the footer to display...
If you want the footer pinned to the bottom of the viewport, then I would recommend using position:fixed; rather than position:absolute;.
Additionally, you will need to set a margin-bottom equal to the height of the footer so that the content from the page does not become hidden underneath the footer.
If you want the footer beneath the content, then make the following changes:
Remove position:absolute; from the footer.
Remove height:100vh; from html and body.
Ensure the footer is display:block;.
Ensure that the container for your main content does not have position:absolute, position:fixed nor float.
Ensure that the HTML for your footer is placed beneath your content.
Related
How can I make footer web component remain at the bottom of any page where it will be used? regardless of whether the content of the page is enough or not.
I have tried adding css properties such as position: fixed; and bottom: 0; but on same pages the content goes behind the footer just remains in place.
if you do position fixed bottom 0, you can add bottom margin/padding to the underneath element to create space so that the footer doesn't overlap the content
CSS
.footer {
position: fixed;
bottom: 0;
height: 50px;
}
.content {
margin-bottom: 50px;
}
What I'm trying to achieve is a div container that is responsive but the ability to overlay highlight fields that will stay in the same place based on the parent div. I want to be able to highlight certain areas of text or form fields but have the form be responsive. Here's a link to an example: http://www.codeply.com/go/nufYSSEMir
As you can see the highlight div is position: absolute; so obviously it's going to stay exactly where it's at. I've tried using percents as top and left values but it doesn't scale with the background image. I have a feeling that my two options are to either have the width as a static value and set the meta viewport to scale to the window size, or get crazy with some JS and maybe jQuery.
Thanks in advance for any and all suggestions.
As said by divix, you need to set position : relative to the parent div.
This will tell the browser that your highlight's position : absolute is absolute in reference to outerContainer.
Basically any position:absolute will look at the first parent that has a position set (whether it's relative, fixed, absolute etc) to calculate top|right|bottom|left offset. If you don't have any parent that has a position set, it will just take the body as a reference
Edit: In order the get the right responsivness try this :
body {
background-color:#ddd;
}
#outerContainer {
background: transparent url("http://scontent-ord1-1.xx.fbcdn.net/hphotos-xpl1/t31.0-8/s960x960/12605534_504076036438839_6108375615162000201_o.jpg") no-repeat scroll center top / 100% auto;
height: 960px;
margin: 0 auto;
max-width: 742px;
width: 100%;
position: relative;
}
#media only screen AND (max-width:742px){
#outerContainer {
height:0;
padding-top:129.5%;
}
}
#innerContainer {
background-color: rgba(0, 255, 0, 0.5);
border: 1px solid #000;
height: 8%;
left: 12%;
position: absolute;
top: 14%;
width: 30%;
}
Simply add position: relative; to the #outerContainer, it works for me.
I've got a cordova app using jquery, jquery-mobile, iscroll and iscrollview
I'm not exactly committed to any of these tools.
I've got the jquery-mobile header/footer stuck to the top and bottom of the screen just fine.
I have a scrollable div between the header and footer. It will contain variable amounts of data. Sometimes the data will be less than the height of the div and sometimes it will be greater (hence the scrolling)
Here's the tricky part. I want to stick the bottom of the scrollable div to the top of the footer. When I add stuff to the div i want the most recently added closest to the top of the footer so the top of the scrollable div looks like its growing upwards towards the bottom of the header as data is added.
Once the top of the scrollable div is fille by its content then i want to be able to scroll it.
Has anyone been able to achieve something like this?
Here's a neat little trick for you.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
Now the CSS
div {
width: 100%;
}
.header {
position: absolute;
top: 0px;
left: 0px;
height: 50px;
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
height: 100px;
}
/* the magic */
.content {
position: absolute;
top: 50px; /* matches height of header */
bottom: 100px; /* matches height of footer */
left: 0px;
overflow: scroll;
}
The neat thing about forcing .content to have both a top and a bottom is that it stretches the div so that it's always the proper height. IF you specified height on it, it wouldn't work, but because the height is determined by the top/bottom property, it's dynamic. I think this gets you to where you want to be.
Here's a fiddle
Edit: Here's what it looks like with content
Edit 2 - forcing content to grow from the bottom.
I'm not sure this is a good idea, and I'm not sure I would ever seriously recommend doing things this way. However, using vertical-align it's possible to force content to grow from the bottom. I suspect that it would be better to just set a margin with javascript that shrunk as content grew, but... maybe not. With all that said, here's one way to do things with CSS.
This requires a little bit of restructuring of the content div.
<div class="content">
<span class="margin"></span>
<span class="inner"></span>
</div>
And a little bit more CSS
span.left-margin {
height: 98%;
width: 0px;
display: inline-block;
}
span.inner {
width: 99%;
background-color: white;
display: inline-block;
vertical-align: bottom;
}
It looks like this with a little content
It looks like this with a lot of content
If you want the scroll bar to stick to the bottom as content comes in, you'll need to do some javascript (easy to google it).
I'm not completely happy with doing things this way because if you set height 100% or width 100%, the content div gets a scrollbar automatically from the beginning. However... it looks pretty good and should work in most (if not all) browsers.
I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle
Alright, this one's tricky.
To begin, this fix can be in JS or CSS, doesn't matter as long as it works.
Here's the issue:
I have a site with a float:right sidebar, and the footer's position is based on the #content's height. However, when the #content is shorter than the sidebar, the footer overlaps the sidebar and doesn't look very good.
What I need:
a script that detects the HEIGHT of a certain element (in this case #sidebar) and modifies the min-height of the #content to match
OR
a script that detects the HEIGHT of the #sidebar and positions the footer accordingly.
For a live version of this, check http://wizardcm.com/portfolio
The reason for not using a fixed height for the #content (or for the position of the footer) is that Tweets are never the same length, and other pages have extra sidebar widgets that add to the height.
1.put your #sidebar before #content.
2.remove position:absolute from #sidebar.
3.remove float:left from #content.
4.remove overflow:hidden from #content.
What I need: a script that detects the HEIGHT of a certain element (in
this case #sidebar) and modifies the min-height of the #content to
match
Make sure you link jQuery in your head tag... example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Than place the following code within a <script> tag below it:
$(window).bind("resize", function(){
var $sideHeight = $("#sidebar").height();
$("#content").css({minHeight: $sideHeight + 'px'});
}).trigger("resize");
This is a problem with your css layout, you do not need a JavaScript solution. You have floats and absolute positioning on your sidebar which takes it out of page flow.
Your classes should be:
#content {
float: left;
margin: 0;
min-height: 300px;
overflow: hidden;
position: relative;
width: 770px;
}
#sidebar {
float: right;
font-size: 10pt;
margin: 10px 0 0;
padding: 0 0 10px;
right: 40px;
width: 300px;
}
#content .page, #content .post {
padding: 10px 15px !important;
}
And everything falls into place.