I have a wide image I want to use as a fixed footer. The main page is 960px and centered, and the footer is 1620px. If the browser window is greater than 960px wide, then it shows more and more of the footer image without displaying scroll bars.
How can I achieve this? So far I have this, but it's wrong:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
div#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -340px;
text-align: center;
}
div#body-container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
.footer, .push {
width: 1620px;
height: 340px;
}
HTML
<div id="wrapper">
<div id="body-container"> <!-- width: 960px -->
<!-- content -->
</div>
<!-- fixed footer -->
<div class="push"></div>
<div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px -->
</div>
.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}
You can solve this by updating the width of your footer to 100% and adding the property overflow: hidden which will remove the scrollbars if the content inside (the image) is larger than the width of the footer.
It gets a little more complicated however if what you're trying to do is also center the image. For this you'll need to add relative positioning to the .footer and absolute positioning to the img. You'll also need to add left: 50% and margin-left: -810px (half of your image width) to the img.
Here is the final updated portions of the code:
.footer, .push {
width: 100%; /* changed from 1620px;*/
height: 340px;
overflow: hidden;
position: relative;
}
.footer img {
width: 1620px;
height: 340px;
left: 50%;
margin-left: -810px;
position: absolute;
}
And here is a jsfiddle to demonstrate: http://jsfiddle.net/uf8Lh/
Related
I have some content that is in an iFrame and a Footer that I want to be fixed, but I want the size of the footer to change based upon the user's screen size and I want the footer graphic to fill the footer. The footer has a background image that uses background-size: cover. So when the user has a wide screen, the footer should be as wide as the screen and the height should maintain the aspect ratio of the background image.
My HTML looks like this:
<div id="content">
<iframe id="xyz">
</iframe>
</div>
<div id="footer">
<div id="innerFooter">
</div>
</div>
My CSS looks like:
#content {
top: 0px;
left: 0;
position: relative;
border: 1px solid #6AA3D4;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
}
#footer {
width: 100%;
height: 100%;
background-color: #fff;
bottom: 0;
position: absolute;
width: 100vw;
}
.innerFooter {
background: url("images/footerMain.png");
height: 100%;
width: 100%;
background-size: cover;
position: relative;
display: inline-block;
}
I want my footer to be at the bottom of the page and to resize appropriately (height/width) to fully fit the background graphic.
I also want my main content (iframe) to be the full height of the page to the top of the footer.
Right now my iframe is not the full height of the page.
instead of position:absolute to footer use position:fixed and height should be in pixel for footer not in %.
#footer {
width: 100%;
height: 60px; /*changed percent to pixel*/
background-color: #fff;
bottom: 0;
position: fixed; /*changed absolute to fixed*/
width: 100vw;
}
see more on CSS positioning: Here
I want a page with sticky footer which's scrollbar does not overlap header, only body. Like I do in this fiddle. But now i want that content (dotted box) has 100% height of body.
html
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
<div class="content-container">
<div class="my_content">Full height ??</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</div>
css
html,
body {
height: 100%;
overflow: hidden;
}
body {
padding-top: 50px;
}
.container {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.content-container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
position: relative;
padding-top: 15px;
padding-bottom: 15px;
min-height: 100%;
margin-bottom: -60px;
}
.footer {
position: relative;
width: 100%;
background-color: red;
}
.footer,
.push {
height: 60px;
}
.my_content {
border: 1px dotted;
width: 100%;
height: 100%;
min-height: 200px;
min-width: 300px;
}
You can suggest any other template for using sticky footer.
You can set .my_content to 100% of the viewport height minus the height and (vertical) padding of the other elements (i.e. header height, footer height, top and bottom padding on .content-container) on your page like so:
.my_content {
min-height: calc(100vh - 140px);
}
DEMO
If your header and footer have variable heights, this won't work though.
use this example for sticky footer it does not overlap header
http://jsfiddle.net/0dbg9ko2/12/
.footer {
position: fixed;
bottom:0;
left:0;
background-color: red;
}
and i can some changes in html
I have three DIVs, one is the header at the top which should be fixed (should not scroll), width 100%, height 50px; another is a sidebar to the left which needs to be 100% of browser's height, fixed width of 200px and another DIV for the main content to the right which will be fluid in width, that is 100% of the remaining width (total minus 200px).
Content in the main content DIV should scroll vertical as content grows, but the sidebar to the left and header DIV should remain as it is. YouTube's home page is the perfect example what I want to achieve. I tried all position types and widths, but no success. HTML is like this:
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Edit:
Basic CSS code I am trying is:
#header {
position: fixed;
width: 100%;
height: 50px;
}
#sidebar {
position: fixed;
width: 220px;
height: 100%;
}
#main-content {
position: relative;
left: 220px;
width: 100%;
height: 300px; /*This could be anything, content should scroll vertical*/
}
Simple css code :
body {
padding: 0;
margin: 0;
}
#header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background-color: red;
}
#sidebar {
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
width: 200px;
background-color: green;
}
#parent {
margin-top: 50px;
margin-left: 200px;
background-color: blue;
}
Example :
http://jsfiddle.net/rp4ss12b/
Your top bar and side bar need to be position: fixed;. Then your main content need to have a margin-top (in order not to be hidden by the top bar) and a margin-left (in order not to be hidden by the side bar).
You could do it like this:
html, body {
height:100%;
margin:0;
}
#header {
width: 100%;
height: 50px;
background-color: red;
position: fixed;
z-index:999;
}
#parent {
width:100%;
height:100%;
}
#sidebar {
padding-top:50px; /* padding-top must be the same as header height */
width:200px;
height:100%;
background-color: blue;
box-sizing:border-box;
position: fixed;
z-index:99;
}
#main-content {
position: relative;
width: 100%;
padding-left:200px; /* padding-left must be the same as sidebar width */
height: 300px; /* This could be anything, content should scroll vertical */
background: green;
box-sizing:border-box;
padding-top: 50px; /* padding-top must be the same as header height */
}
<div id="header"></div>
<div id="parent">
<div id="sidebar"></div>
<div id="main-content"></div>
</div>
Check this snippet, You can do this by using pure css as shown below or you can use display:inline-block or float elements but you need to set the width of right div using javascript.
html,body{width:100%;height:100%;margin:0;padding:0;}
#header{position:fixed;height:50px;width:100%;background:#000;top:0;left:0;}
#parent{background:red;width:100%;height:100%;display:table;border-collapse:collapse;}
#parent div{display:table-cell;padding-top:50px;}
#sidebar{width:200px;background:#444;color:#fff;}
#main-content{background:#ccc;padding:0;margin:0;}
<div id="header"></div>
<div id="parent">
<div id="sidebar">sadds</div>
<div id="main-content">dshajkashljk</div>
</div>
I created a sticky footer, and it appears to be staying at the bottom of the page. The only problem is that when I minimize my browser by dragging the bottom of the browser up, the content above overlaps with the footer. The Content div contains images which are on top of the footer when I minimize. Also the type within the footer appears above the images (when minimized). Any help would be appreciated. Thank you.
<----- HTML Structure ---->
<div class="supercontainer"
<div class="nav"></div>
<div class="wrapper">
<div class="content"></div>
<div class="push"></div>
</div>
</div>
<div class="footer"></div>
<----- Relevant CSS ----->
.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
position: relative;
}
.footer {
background-color: black;
width: 100%;
height: 100px;
}
.push {
height: 100px;
}
To get the content to push down the footer, you need to give the content div a negative bottom margin that matches the footer's height.
.supercontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
position: relative;
}
.footer {
background-color: black;
width: 100%;
height: 100px;
}
http://css-tricks.com/snippets/css/sticky-footer/
I have one main div that should make the page scrollable. On either side of this div there is a sidebar. The only difference I want from how it is now, is that the sidebars should always stay on top (position: fixed;)
I've tried everything, but it doesn't work. If I put position: fixed; on the .fixed, the width is no longer 100 % but the width of the actual contents inside. If I put on width: 100% the width turns 100 % of the viewport.
Is this even possible with just CSS?
JSFiddle: http://jsfiddle.net/6yWNv/
Sidebar 1
<div id="wrapper">
<div class="contents">
<p>Lorem ipsum dolor sit amnet.</p>
</div>
</div>
<div class="sidebar">
<div class="contents">
<div class="fixed">
Sidebar 2
</div>
</div>
</div>
html, body {margin: 0; padding: 0;}
#wrapper {
width: 54%;
float: left;
background: #0FF;
}
.sidebar {
width: 23%;
float: left;
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 55%;
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
}
The trick is to set position:fixed on the sidebar (with left:0 and right:0 respectively) and then add margin-left:23% to #wrapper:
#wrapper {
width: 54%;
margin-left: 23%;
background: #0FF;
}
.sidebar {
width: 23%;
position: fixed;
left:0; top: 0;
}
#wrapper + .sidebar { /* target second sidebar */
left: inherit; /* reset left */
right:0;
}
if you want the green sidebars to stay in place, but the red boxes to move away, then something like this should work:
.sidebar {
width: 23%;
float: left;
position: relative; /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 100%; /* relative to sidebar */
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
position: fixed; /* starts a new context... */
width: 23%; /* so this is not relative to sidebar *.
}
Not possible with just CSS. When you make an element fixed, it removes it from its "context" and makes its new "context" the document. That's why specifying width: 100% on the position: fixed element spans the page.
Edit: I'm assuming that you want the green sidebars to stay in place but the red boxes to move away as you scroll (I'm making this assumption because of the way you've named your classes on your page).
you need to fix the sidebar, not its contents.
Just remove the float and set the position fixed to top and right
.sidebar {
width: 30%;
position: fixed;
top:0;
right:0;
}