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>
Related
I used the top solution from this question: Stop fixed position at footer to keep a bar fixed until it runs into the footer. And everything is working fine, except for on pages where there is not enough content to scroll. Ideally, I would like the fixed bar to sit on top of the footer on such pages. However, I think I am running into issues with my footer, as it has these styles;
#footer {
position: absolute
bottom: 0
}
I used these styles to keep the footer on the bottom of the pages with very little content. On these pages, my fixed bar is hidden behind my footer.
Here is everything that I have.
CSS
#footer {
width: 100%;
height: 50px;
bottom: 0;
background-color: #D9D9D9; /* light gray */
color: #404040; /* gray */
position: absolute;
}
#fixed {
height: 50px;
position: fixed;
bottom: 0;
background-color: #4B99D3;
}
#fixed-parent {
position: relative;
margin-bottom: 50px;
}
jQuery
$(document).scroll(function() {
checkOffset();
});
function checkOffset() {
if($('#fixed').offset().top + $('#fixed').height() >= $('#footer').offset().top - 10)
$('#fixed').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#fixed').css('position', 'fixed'); // restore when you scroll up
}
HTML
<div id="fixed-parent">
<div id="fixed">
fixed content...
</div>
</div>
<div id="footer">
footer content...
</div>
Example here: http://jsfiddle.net/e5q04cv2/
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'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...
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}
I have a problem with sticky footer which has absolute position,
<div class="wrapper">
<div class="content">
<p>Content</p>
</div>
<div class="footer">
Footer
</div>
</div>
body {
height: 100%;
min-height: 100%;
overflow: hidden;
width: 100%
}
.wrapper {
position: absolute;
margin: 0;
padding: 0;
min-height: 100%;
height: 100%;
width: 100%;
overflow: auto;
background: blue;
}
.footer {
position: absolute;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
When I do scroll down my footer also scrolled, when I remove height:100% footer works fine but I need height:100% for my scroll bar for wrapper because I disabled it in body (I need do it). I want to retain height:100% for body and .wrapper but that footer was always at bottom. How can I do it using css ?
i got the same issue, use height: 100vh; i hope works for you!
If you need your footer to always be at the bottom look at this fiddle: http://jsfiddle.net/2n9okg1b/3/
In the fiddle I amd using poition: fixed; in the footer CSS. Fixing the position tells the browser to always keep the elements where you defined them to be.
Update
I have updated the fiddle link. http://jsfiddle.net/2n9okg1b/3/
With this update I detect with jQuery if the footer is below the window. If the footer is below the window I set the footer position to fixed. If the footer is not below the window I set the footer's position to relative. This allows the footer to always be at the bottom of the content or at the bottom of the window.