We Keep Coding

How do I remove the small blank/uncovered space at the bottom of my blogger blog?

I have a blogger blog, and I need to know how to have the footer entirely cover the bottom of the page. When you scroll to the bottom, there is a small gap between the content container which is obviously black, and the bottom of the browser window. How do I fix this? How do I make the content container stretch to the bottom of the page entirely?
http://blog.substructures.us/

You can use
.content{
heigth : 100%;
padding : 5px;
margin : 5px;
}

Changing CSS for .content-inner to this will work although there might be a better solution available, so keep looking at answers in this thread.
.content-inner {
margin-top: -20px !important;
min-height: 100vh;
}

I experimented with the answer Dr. Geek gave me, and had a problem with a horizontal scrollbar appearing at the bottom and throwing the pages setup off from the main setup, so I added this to the custom CSS for now:
.content{
margin-bottom: -1px;
}
It's a very simple fix, and anyone who uses blogger and wants to remove a gap from the bottom of their blog will have this answer hopefully.

Bootstrap affix() plugin having issue while scrolling the content

I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far:
http://jsfiddle.net/zncud7md/2/
The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the:
#header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me.
I'm unable to find a way around this. Any ideas how can i prevent this issue??
Thanks!!

Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position (http://getbootstrap.com/javascript/#affix).
Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.
#header {
position: fixed;
top: 0;
z-index: 9999;
}
#body {
padding-top: 75px;
}
http://jsfiddle.net/zncud7md/4/

CSS/HTML - Floating DIV when I scroll issue

I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/

try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example

non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN

Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}

Sticky Header not staying totally fixed

I'm using sticky.js to accomplish a sticky header. Everything is working except when I scroll down, the header moves up about 10-20 pixels and to the left about 10-20 pixels as well. I'm not sure what I'm doing wrong but if anyone knows why this might be, i'd really appreciate the help.
Here is a link to the site in progress http://barret.co/dad/services.html.
Any help or suggestions appreciated.

To counter the vertical movement, you'll have to instruct sticky.js (if possible, can't tell) to set the top of .sticker to 10 pixels (the top padding of the <aside> element), not 0.
Then:
the css for the logo image should be changed to something like this:
#logo {
margin-left: 5%;
margin-bottom: 25%;
margin-top: 20px;
}
I removed the
display: block;
max-width: 100%;
margin: auto;
as you can see. You'll have to play around with the left margin value to position it to your liking.
Then:
Because of the width of the .sticker element being in percentages, the actual width of the element changes when it becomes 'fixed'. This is because the element is now considered a child of the viewport and not the html parent element. This squishes your content from 310 to roughly 273 pixels. Set a width (in percentages) on your .sticker element that suits your design and be done with it.
Hope it helps!

Fixed footer & relative DIV

I am soo confused right now. Coding really isn't my thing, so I believe that I messed up majorly somewhere which creates this problem:
I'm trying to make a sticky footer. The footer does stick--but only if I make my main content DIV (the white centered box) relative. I need the height of that DIV to stretch with the content (which will contain a PHP script that'll pull from my Wordpress blog--so naturally, I need it to adjust as necessary). If the DIV stretches longer than 500px, there's a weird two-scrollbars things going on, & I hate that. I like the relative DIV, but I would love to rid of all the extra scroll space, as well as making sure it stetches/regresses with content & the footer stays where it is.
I hope that's not too confusing. I'd just like someone to look over my source code & see where I'm going wrong. Thank you for any help.
http://www.missa.me/practice3.php

nice website :)
You need to make the footer fixed,
use this CSS
#footer {
position: fixed;
height: 80px;
clear: both;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
}
and take overflow: auto; off of #main
what this does is tell the footer to stay 'fixed' to the bottom of your viewport, so it will always stick to the bottom of your screen.. and taking overflow:auto; off will give your #main the natural ability to expand it's height depending on the content inside it.