I've got the following:
<div class="wrapper">
<div class="top">
</div>
<div class="left">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
With the following CSS:
.top {
position: absolute;
left: 0;
height: 80px;
width: 100%;
}
.left {
position: absolute;
left: 0; top: 80px; bottom: 100px;
width: 200px;
margin-left: 5px;
}
.main {
position: absolute;
left: 200px; top: 80px; bottom: 100px;
width: 84%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
}
I'd like to keep the footer at the bottom of the page (after left and main, and regardless of how big/small main is), but with position: fixed the footer scrolls up/down as you scroll through the page. I've tried position: absolute and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the footer at the bottom of this page)?
Thanks in advance!
Try this:
.footer{
position:absolute;
bottom:0
}
Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.
This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:
.wrapper{
position: relative
}
Fixed does what you're describing, locks elements with your viewport. Absolute makes an element ignore the flow of the rest of your page, so if you want to make it go beneath everything else you'll run into problems. Give this a shot, it'll put it underneath all your content.
footer{
position: relative
width: 100%
float: left
}
If you need it to stay at the very bottom of the screen when you have very short content, you can add a wrapper element around everything and try something like this
.wrapper{
display: block;
min-height: 100vh;
position: relative;
padding-bottom: footer height (set this to how tall your footer is)
}
footer{
position: absolute;
bottom: 0;
}
Give this a go:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.left {
float:left;
width: 200px;
margin-left: 5px;
}
#right {
float:left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
And for older browsers:
#container {
height:100%;
}
Don't use position for every <div> you only need to add position to .footer
Here is a working example...
Related
Image:
I have a container div (yellow) which I’d like to keep at 50% width of the window. A child of that container is an image div (purple) that stretches to 100% of the parent container’s width. and there’s a sticky label (pink) on top of the image div (position: absolute so it can be offset relatively to the image). I'd like to keep that entire half of the screen fixed positioning so it stays sticky as I scroll.
There’s also a title under the image, and that title needs to be visible no matter if someone shrinks the window vertically. So in that scenario the image div should shrink vertically, if needed, in order for that title to be shown.
Basically I'm trying to have the image div always be 100% width of the parent container div. With the image div having a max % height so it can shrink vertically. Or have it keep a fixed aspect ratio (3:4 or whatever) when it shrinks vertically.
I'm trying to avoid using fixed pixels, or ems, in the entirety of my CSS. since the website needs to be stretchy/‘fluid’ vertically, because that title under the image has to show.
HTML looks roughly like:
<wrapper>
<left-column>
<normal text and scrollable stuff>
<right-column-yellow>
<image sticky label-pink>
<image div-purple>
<image title>
Sorry if this is damn confusing my brain is fried! Can anyone pls help me?
You can divide your left and right panel by using position fixed.
If I'm not wrong with your description, this is the answer.
<div class="wrapper">
<div class="left">
<p><!--Some very long text--></p>
</div>
<div class="right">
<div class="image">
<div class="label">Label</div>
<div class="title">Title</div>
</div>
</div>
Some CSS
.left,.right{
position: fixed;
width: 50%;
height: 100%;
display: inline-block;
}
.left{
left:0;
top: 0;
overflow: auto;
}
.right{
right: 0;
top:0;
background-color: yellow;
}
.right .image{
position: relative;
width: 100%;
height: 50%;
top: 50%;
left: 0;
background-color: #fff;
transform: translateY(-50%);
}
.right .image .label{
position: absolute;
left: 0;
right: 0;
top: -10px;
text-align: center;
width: 200px;
background-color: pink;
margin: auto;
}
.right .image .title{
position: absolute;
left: 0;
right: 0;
bottom: -40px;
text-align: center;
width: 200px;
background-color: #000;
margin: auto;
color: #fff;
font-size: 30px;
}
You can refer to my codeine as well.
https://codepen.io/masonwongcs/pen/WMJGZb
I am working in a page that has a min-width of 1124px, so each time the browser is smaller than 1124px, the page's content can be scrooled horizontaly, instead of a responsive transition.
http://seluno.jp/
I wonder if I can fix the header only vertically, so when the browser is smaller than 1124px, the header will be scrolled horizontally with the rest of the pages content, but when the page is scrolled vertically, the header is fixed on top.
body {
min-width: 1124px;
}
header {
position: fixed;
}
You can use position: sticky; so it stays fixed on top but allowing horizontal scroll like this:
#header {
position: sticky;
top: 0;
z-index: 1;
}
Example:
body {
min-width: 1124px;
}
#header {
position: sticky;
top: 0;
z-index: 1;
}
/* Just to fill space on screen */
#header {
width: 100%;
height: 100px;
background: linear-gradient(45deg, white, blue);
}
.content {
min-height: 500px;
}
<div id="header">
<h1>Header</h1>
</div>
<div class="content">
<p>Content</p>
</div>
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.
Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}
The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
Use the following
footer {
position: absolute;
bottom: 0;
}
try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
I am trying to a fixed header on top of the page. So when the user scroll down, the header stay up on top. However this is only work in Chrome, FireFox and Opera which scrolls smoothly.
If you have a look the code below. Open with IE and Google Chrome. You will see the difference! The header must stay in the wrapper.
Example Code
I would like to know how to make the scrolling smooth when repositioning objects inside the div elements when set to absolute to keep it floating at the top of the box.
HTML:
<div id="wrapper">
<header>
<h2>Title Header</h2>
</header>
Content page
</div>
CSS:
#wrapper{
height:200px;
overflow-y:scroll;
position:relative;
}
#wrapper > p {
position: absolute;
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: absolute;
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
#wrapper header h2 { margin:0 }
Javascript:
$(function(){
$('#wrapper').scroll(function(e){
$('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
});
});
I'd rather use this CSS and remove the JS for cross-browser compatibility:
// same CSS...
#wrapper p {
margin-top: 50px; //no positioning just a top margin
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: fixed; // from absolute to fixed
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
//same CSS...
Demo.
I need to make a single div that takes up 100% of the window height to create a sidebar. This is easy. But is there a way to then split that column into 3, with a fixed height 1st and 3rd section with the middle section expanding to fill the remaining space on load and when the browser is resized with just CSS, without having to resort to javascript?
If you stick three divs within the sidebar and the sidebar has a CSS position of 'relative' then you can set the CSS for the three inner divs as follows:
#divTop {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 120px;
}
#divMiddle {
position: absolute;
top: 120px;
bottom: 120px;
left: 0px;
right: 0px;
height: auto;
}
#divBottom {
position: absolute;
bottom: 0px; /* EDIT: corrected from 120px; */
left: 0px;
right: 0px;
height: 120px;
}
I know you accepted an answer. I'm adding this for future reference. You can also do what you want with the css display:table style. Not supported in IE7, but... maybe you don't care.
Use a container div, and then three child divs, like this:
<div id='container'>
<div id='col1'> <h1>content for col1</h1> </div>
<div id='col2'> <h1>content for col2</h1> </div>
<div id='col3'> <h1>content for col3</h1> </div>
</div>
The css looks like this:
#container {
display:table;
}
#container > div {
display:table-cell;
padding:4px 8px;
}
#col1 {
width:160px;
background-color:LightGreen;
}
#col2 {
background-color:LightBlue;
}
#col3 {
width:240px;
background-color:LightPink;
}
http://jsfiddle.net/CtEya/embedded/result/