Here's the example of what I have so far:
https://codepen.io/anon/pen/jQZpNw
My objective is to center that box in the middle to the center of the page, and have the rest of the elements respond appropriately. I've ended up using margin-top: 10%; as a way to center the box, but the problem with this approach is that on smaller browser heights users will have to scroll. It's also not perfectly centered.
Ideally, what I'm looking for, is to:
Center the box (vertically and horizontally)
On small browser heights the center box should sit just underneath the navbar with a small margin, to eliminate the scrolling on small browsers.
Sticky the footer with a gap between the footer and the box when the browser height is really small.
When the center box expands its contents or the navbar expands its contents everything else should move appropriately and not overlap.
I made some javascript buttons to expand the navbar and centerbox so it's easier to experiment with. My actual app is obviously different, this is a stripped down version of what I have.
I tried a bunch of different things to get this to work with no luck, when I used calc() to set it to the center on small browser heights the footer or navbar would overlap the box. I'm out of ideas now, and CSS is not my strong suit. Thanks!
You can try a full page wrapper with a header, the footer, and the div you want centered. Using display:flex; with the flex-direction set to column and justify-content: space-between; you can basically center the div. It will be off a little bit if your header and footer are different sizes but you won't need a ton of media queries or code that is hard to maintain. Set the min-height of the wrapper to 100vh and your footer will be sticky, unless the window is too short to fit all of the pieces.
$('#nav-button').on('click', function(e) {
e.preventDefault();
$('#nav-content').toggleClass('expand');
});
header {
background: red;
padding: 5px;
}
header a {
color: white;
}
#nav-content {
height: 0;
transition: height .3s;
}
#nav-content.expand {
height: 300px;
}
footer {
color: white;
background: red;
padding: 5px;
}
#centered-box {
height: 200px;
width: 200px;
background: green;
margin: 10px auto;
}
#wrap {
min-height: 100vh;
display: flex;
justify-content: space-between;
flex-direction: column;
}
body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<header>
<nav>
Expand
<div id="nav-content"></div>
</nav>
</header>
<div id="centered-box"></div>
<footer>This is the footer</footer>
</div>
Are you using media queries at all in your CSS? Media queries allow you to style elements a certain way if the browser window size falls within the query.
I'm using laravel 5.5 and need a footer to be at the bottom of every page.
Currently I have the footer in app.blade.php along with a nav bar and the content coming from other .blade files using yields #yield('content')
the app.blade file has
html, body {
height: 100%;
}
and the footer is
footer {
position: static;
bottom: 0px;
}
When inspecting the page the html and body are 100% height but the footer is just hanging out with the content and not shifting to the bottom of the page.
Are there any larvel related styles that could be interfering with the positioning?
I don't think laravel styling has anything to do with the problem. Setting the positionproperty to static isn't going to give you the results you're looking for, as static is the default position value for almost every html element. You could set it to absolute, fixed or sticky and depending on your choice you might need to set the bottom property on your footer to 0px.
This CSS-Tricks article should give you a better idea of how you want to implement the position and bottom properties on your footer.
Here's an implementation using the fixed value on the footer and a relative value on the body element.
You can also view this codeply project and experiment with changing the footer's position value.
html, body {
height: 100%;
background-color: red;
position: relative;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: green;
}
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
I am looking to implement the opposite behaviour to the following question: CSS Push Div to bottom of page. I.e., when content overflows to the scrollbars, I would like the footer to be at the bottom of the page, like Stack Overflow.
I have a div with id="footer" and the following CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
This moves the div to the bottom of the viewport - but the element stays there even when you scroll the page down, so it is no longer at the bottom.
How can I make sure the div stays at the bottom of the page's contents even when the content overflows? I'm not looking for fixed positioning, only for the element to be at the bottom of all content.
Image:
This is precisely what position: fixed was designed for:
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
Here's the fiddle: http://jsfiddle.net/uw8f9/
Unfortunately you can't do this with out adding a little extra HTML and having one piece of CSS rely on another.
HTML
First you need to wrap your header,footer and #body into a #holder div:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
Then set height: 100% to html and body (actual body, not your #body div) to ensure you can set minimum height as a percentage on child elements.
Now set min-height: 100% on the #holder div so it fills the content of the screen and use position: absolute to sit the footer at the bottom of the #holder div.
Unfortunately, you have to apply padding-bottom to the #body div that is the same height as the footer to ensure that the footer does not sit above any content:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
Working example, short body: http://jsfiddle.net/ELUGc/
Working example, long body: http://jsfiddle.net/ELUGc/1/
Just worked out for another solution as above example have bug( somewhere error ) for me. Variation from the selected answer.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
for html layout
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
Well this way don't support old browser however its acceptable for old browser to scrolldown 30px to view the footer
plunker
I realise it says not to use this for 'responding to other answers' but unfortunately I don't have enough rep to add a comment onto the appropriate answer (!) but ...
If you are having problems in asp.net with the answer from 'My Head Hurts' - you need to add 'height : 100%' to the main generated FORM tag as well as HTML and BODY tags in order for this to work.
You didn't close your ; after position: absolute.
Otherwise your above code would have worked perfectly!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
I would comment if i could , but i have no permissions yet, so i will post a hint as an answer, for unexpected behavior on some android devices:
Position: Fixed only works in Android 2.1 thru 2.3 by using the following meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no">.
see http://caniuse.com/#search=position
This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height.
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
I've solved a similar issue by putting all of my main content within an extra div tag (id="outer"). I've then moved the div tag with id="footer" outside of this last "outer" div tag.
I've used CSS to specify the height of "outer" and specified the width and height of "footer". I've also used CSS to specify the margin-left and margin-right of "footer" as auto. The result is that the footer sits firmly at the bottom of my page and scrolls with the page too (although, it's still appears inside the "outer" div, but happily outside of the main "content" div. which seems strange, but it's where I want it).
I just want to add - most of the other answers worked fine for me; however, it took a long time to get them working!
This is because setting height: 100% only picks up parent div's height!
So if your entire html (inside of the body) looks like the following:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
Then the following will be fine:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
...as "holder" will pick up it's height directly from "body".
Kudos to My Head Hurts, whose answer was the one I ended up getting to work!
However. If your html is more nested (because it's only an element of the full page, or it's within a certain column, etc) then you need to make sure every containing element also has height: 100% set on the div. Otherwise, the information on height will be lost between "body" and "holder".
E.g. the following, where I've added the "full height" class to every div to make sure the height gets all the way down to our header/body/footer elements:
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
And remember to set height on full-height class in the css:
#full-height{
height: 100%;
}
That fixed my issues!
if you have a fixed height footer (for example 712px) you can do this with js like so:
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
I hit my footer with a margin-top: auto and it did the trick! Im commenting this here just in case it could help any future visitors.
I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.
This is my code for the sticky footer
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
}
#footer, .push
{
height: 60px;
}
Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.
Change your CSS to the following should fix the problem:
html, body, form
{
height: 100%;
}
EDIT
In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).