Tools: CSS and Flexbox
Note: This question is strictly a CSS/Flexbox aesthetics question
Problem: My footer will not stay planted these days.It shrinks and slips off the page as you resize vertically.
I use to have a nice Holy-Grail layout and the header and footer stayed in their places as you shrunk the window vertically while the middle content gave way.
Life was great- until I translated my CSS into React's JSX style, which has forced me to wrap an extra div around my footer.
Before when life was great:
<div class="main-container"> /*flex-direction:column
<div class="header">
<div class="canvas"> /*my pretty flex rows*/
<div class="footer">
After translation ruined my week:
<div class="main-container"> /*flex-direction:column
<div class="header">
<div class="extra-container"> /*dang you React*/
<div class="canvas">
<div class="footer">
You can check out this puzzle here http://jsfiddle.net/wd6o22dr/
The Brain Teaser for you Front-End Masters:
Considering that keeping that "extra-container" is a must, how do you keep the footer from shrinking and slipping off the page as you resize the page vertically?
Considering that keeping that "extra-container" is a must, how do you
keep the footer from shrinking and slipping off the page as you resize
the page vertically?
One option you have is absolute positioning.
HTML
No changes.
CSS
Add four rules to existing declaration block.
#footer {
height: 50px;
border: 1px solid black;
background-color: black;
position: absolute; /* NEW */
bottom: 0; /* NEW */
z-index: 1; /* NEW */
width: 100%; /* NEW */
}
DEMO: http://jsfiddle.net/wd6o22dr/1/
Related
I am making a small Sinatra app and using bootstrap for layout. But it is giving some issues.
It is not sticking at the bottom and also not showing 100% width as I have programmed. Also, the text of the footer is not getting centralized after even trying the text-center class.
Below is my HTML for the footer.
<div class="container-fluid">
<footer id="footer">
<p class="mx-auto">© 2017 <strong>Coding Tips</strong></p>
</footer>
</div>
Please also see below my CSS for the footer.
#footer {
background-color: white;
color: #111111;
position: relative;
z-index: 1
bottom: 0;
left: 0;
width: 100%;
/*height: 20px;*/
align-content: center;
}
Any suggestion to solve this problem?
There's a much easier way to create a sticky Bootstrap footer that doesn't require you to write any styles yourself. The Bootstrap navigation bar component comes with the .navbar-fixed-bottom class, alowing you to fix a navbar to the bottom of the screen. For an example,
p {
text-align: center;
padding: 10px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p>© 2017 <strong>Coding Tips</strong></p>
</div>
</nav>
With this, you can get a fixed-to-bottom navigation bar that acts as a footer using pure Bootstrap.
Edit - Creating a sticky footer that expands with the page.
The previous example demonstrates how to create a footer that is fixed to the bottom of the viewport, superimposed over the page content. If you're looking for a footer that will only be fixed to the bottom of the screen when content is sparse, we can use flexible boxes.
body {
margin: 0; /* To ensure the footer takes up the full width of the viewport */
}
.container {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
text-align: center;
}
<div class="container">
<div class="content">
Your content goes here.
</div>
<footer>
<p>© 2017 <strong>Coding Tips</strong></p>
</footer>
</div>
The .content class automatically takes up the available space, forcing the footer to the bottom of the screen. Since we set the minimum height of .container to 100vh, it'll take up at least the entire height of the screen. Once more space is needed, the footer get's pushed down further. Flexbox provides what's probably the easiest and cleanest method of achieving this effect.
Bootstrap navbars: Components - Bootstrap
Solved by Flexbox: Sticky Footer - Solved by Flexbox - Cleaner, hack-free CSS
to align text in center please use
text-align: center;
the width is 100% as needed and
to place footer at the bottom you can give
top: 400px;
please check the given link https://jsfiddle.net/komal10041992/xn8mmg44/3/
I have some DIVs on a page. How can I make the DIVs create a new column on the right when the bottom of the page is reached. So I have some small fixed height DIVs with images inside them. After every DIV, there is a line and then the next div and so on. On smaller displays, the screen requires scrolling to see the DIVs. So I added overflow: hidden to the body, to disable the scrolling. Now the DIVs at the very bottom are cut out, so I want the DIVs that are cut out, to create a new column to the right.
Example: .
body {
overflow: hidden;}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
There's a lot of solutions to this and all run into polyfill issues. Columns are notorious for this.
A good option with decent coverage is to use flexboxes. Flexboxes were pretty much made for this kind of stuff.
Wrap all the divs in another div (i used section) and give the wrapping container some flexbox rules:
body {
overflow: hidden;}
.wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh; /*the height will need to be customized*/
width: 50px;
}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
margin-left: 10px;
}
<section class="wrap">
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
</section>
You'll need to give height and width rules to the wrapper, however. If it's in another container with a set height, you should be able to give it height: 100% and it will reach the bottom of the page.
Word of warning: columns and flexboxes are notorious for having cross-browser compatability issues, though mobile browsers are somewhat better at this. A good solution is to use a library with a focus on responsive or mobile design, like Bootstrap or SpaceBase (though the latter is a SASS library)
#samuel-denty are you looking for CSS Columns ?
here is jsfiddle: https://jsfiddle.net/zk7578vj/
try using class (.) icon instead of id (#) on css, like this:
body {
overflow: hidden;
-webkit-columns: 50px 2;
-moz-columns: 50px 2;
columns: 50px 2;
}
.icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div class="icon">1</div><br>
<div class="icon">2</div><br>
<div class="icon">3</div><br>
<div class="icon">4</div><br>
<div class="icon">5</div><br>
<div class="icon">6</div><br>
<div class="icon">7</div><br>
<div class="icon">8</div><br>
<div class="icon">9</div>
</body>
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!
Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?