I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}
Related
So i'm doing this project and i'm stuck with the footer. I am having this problem where the second section of the footer gets bigger and goes out of the footer. Another thing is when I do float:left; on the third section of the footer, footer's background goes away. So my question is, how do I contain everything within the footer. Here's the codepen - https://codepen.io/anon/pen/gxjbyg .
If I do this:
footer {
background: rgba(0,0,0,0.15);
clear: both;
position:absolute;
width:100%;
bottom:0;
}
It kinda gets fixed, but i'm wondering if there is another way, while not using the absolute positioning.
That's what you expect?
footer {
background: rgba(0,0,0,0.15);
clear: both;
display: table;
width: 100%;
}
You can use the clearfix css trick that is used for fixing the height of a parent container which has floating children elements. What you want to do in your code that you posted on codepen is make the #left, #center and #right elements float left and then apply the clearfix class to the footer element which is the parent of this three floating elements. Here is a sample code of how that would look like in code:
<html>
<head>
<style>
.clearfix:after{
content: "";
display: table;
clear: both;
}
#left, #center, #right{
float:left;
}
</style>
</head>
<body>
<footer class="clearfix">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</footer>
It appears to me that your problem is that you have #top and #bottom both set to a height of 50% with additional padding of 20px on each. If you look at your overlap, it's 40px.
To fix this, set your height to something like 45% and padding to 5%. That will probably achieve the behavior that you're looking for.
I am quite new with HTML5. Now I'm trying two make to paragraphs in the first article. I used some snippets of http://f6design.com/projects/parallax-scrolling/. Simply I want to achieve two paragraphs on the intro article. I tried this alternative, but failed.
<div class="side-container">
<!-- left side -->
<aside>
Left: Fixed width, 100% height of the window or right hand content
</aside>
<!-- main content -->
<article>
Right: Fluid width
</article>
</div>
http://jsfiddle.net/t3AxY/7/
Here's my code
http://jsfiddle.net/sw8s4/
Any suggestions how to do this?
Best,
Sebastian
I would try something like this:
#content {
z-index: 4;
position: relative;
max-width: 900px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#intro {
float:left;
width: 400px;
padding-right:40px;
}
#manned-flight {
width: 100%;
}
article img {
height:30px;
width:100%;
}
I am not sure what exactly your output should look like, but this way you get two columns.
where the forst one gets a fixed width, and the second one resizes to fill the rest of the parent.
updatet your jsfiddle
Now you can also put height:100%; on body, #content and #intro to make it 100% of the window height.
I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.
How can I resolve this in such a way that there's no gap between the end of content and footer?
In the new jquery, you can just use this:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.
You also can put indexes.
z-index: 1;
http://www.fiveminuteargument.com/fixed-position-z-index
In your case, put z-index in css for footer at 10 or more.
Let's suppose a <footer>, styled with display: block and height: 250px.
So all you have to do to achieve what you want is add:
position: fixed;
top: 100%;
margin-top: -250px;
That's it. It'll be permanently aligned at the bottom. :)
Sticky footer. No javascript required:
http://www.cssstickyfooter.com/
After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.
So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.
<html>
<head>
<style>
body {
text-align:center;
}
#container {
position:relative;
margin:0 auto;
width: 1000px;
text-align:left;
}
#header {
position:relative;
top:0px;
left:0px;
width:1000px;
height: 100px;
border:solid 1px #000;
}
#sidebar {
position:relative;
top:10px;
left:0px;
width:300px;
height: 500px; /* for demo */
float:left;
margin-bottom: 20px;
border:solid 1px #000;
}
#main {
position:relative;
top:10px;
left:310px;
width:690px;
height: 200px; /* for demo */
margin-bottom:20px;
border:solid 1px #000;
}
#footer {
margin:0 auto;
top:20px;
width: 1000px;
text-align:left;
height: 100px;
clear:both;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="container"> <!-- Holds all the content except the footer -->
<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>
</div>
<div id="footer">Footer content here</div>
</body>
</html>
I can't seem to figure this out.
I have the following code:
<div id="wrapper">
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
<div class="schedule">//blah</div>
//
</div>
I want the div #wrapper to of fixed width. And I want each .schedule to be also of a fixed width. I then want, it I have too many in the div, I could just scroll left and right inside that page.
I can't do this!! No matter what I try, when I add more .schedule, they pop to the bottom of the page, and start filling the next row!
Cheers
Kousha
EDIT: Thank you. All the results work. EXCEPT I need to be able to use float: left; or something so that all divs are stock to each other! How can I do that?
It can be done with the following CSS:
#wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 300px;
border: 1px solid red;
}
#wrapper .schedule {
display: inline-block;
padding: 5px;
}
I've put together a basic JSFiddle demonstration.
Live Demo
Hi now used to this css
#wrapper{
min-width:200px;
background:red;
font-size:0;
white-space:nowrap;
}
.schedule{
height:100px;
font-size:12px;
width:100px;
background:green;
margin:1px;
display:inline-block;
vertical-align:top;
}
Demo
Now change to width or height according your layout .........
I suspect what you want is the schedule-divs to float to align themself on the same height.
Try adding this to your css:
#wrapper{overflow:auto;}
.schedule{float:left;}
Sorry if I missunderstod your specification, but I think that's what you really want.
I have a really dumb question to ask.
I am trying to make a div span 100% of the width of a webpage, but it doesn't reach. I want it to be dynamic (not specify the width in px) and I definitely don't want it to make a horizontal scroll bar appear.
I'm trying to make something similar to Stack Overflow's 100% page width 'alerts' which tell you when you've earned a new badge.
Screenshot of my site:
Code for the pink banner div
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
your html body tag might have padding or margin css. you should set those to zero(0). I hope it will help.
Looks like you have padding on your body, which is preventing the div from expanding all the way.
In your css file, ensure that you don't have any padding on the body. If you don't have anything you can try adding this:
body {
padding: 0;
margin: 0;
}
Just add a css for the body to remove the padding and margin:
body {
padding: 0px;
margin: 0px;
}
Also you can apply just to left, right top and bottom margins:
body {
padding-top:0px;
padding-right:0px;
padding-bottom: 10px;
padding-left: 0px;
}
Type
body {
min-height:100%;
height:auto;
margin:0;
padding:0;
}
at the beginning of your CSS file.
I was having the same issue, I had a great big white line on the right hand side of my page. I found the following which was a life saver:
html, body {
width: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
Actually it's quite easy. Make sure the parent container for pink banner div has 0 padding and 0 margin. In this case I'm assuming the container for your pink banner is just the body tag. Now copy the following snippet inside your head section of the page.
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
</style>
The html for your pink banner is also not correct. Replace
<div width='100%' style="padding:0px; background-color:FF0099; background-image:url('pics/pink_bg.png'); ">
</div>
with
<div style="padding:0px; margin:0px; width=100%; height:25px; background-color:#FF0099; background-image:url('pics/pink_bg.png');" >
</div>
A the beginning of each CSS document I always type:
html, body {
padding: 0;
margin: 0;
}
I never have any problems with unwanted outer margins or padding with that code.