内容框向下推页脚并在背景图像（CSS）上创建空白

Question

我的网站上有一个内容框，它会在背景图像下面推出空白区域，将页脚向下推远。我如何设计我的CSS，以便我的内容框保持最大高度，但仍然可以有很多内容？我尝试了一些东西，但它制作了一个非常丑陋的第二个滚动条，看起来真的很业余。

我还希望页脚贴在页面底部。希望这不是在一个问题上要求太多。

添加了jsfiddle的链接......

http://jsfiddle.net/theflyingmouse/XU455/

.hentry {

word-wrap: break-word;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
    width: auto;
}

.site-footer {
    clear: both;
    width: 100%;
background-color: #ffffff;
height: 72px;
}

body.custom-background {
background-size: cover;
}

.site-main {
    padding-top: 10px;
margin-left: 25px;
margin-right: 25px;
background-color: rgba(33, 43, 40, 0.42);
width: 70%;
opacity: 0.95;
height: auto; 
border-radius: 20px;
}