我目前有一个绝对div用于页面的主要内容，我需要在div的底部创建一个空格，以允许页脚显示。页脚是固定的，所以绝对div被视为我猜的最后一个元素，因此意味着底部没有空格，想法就是创建一种类似于此的滚动效果：
这是在一个更大的屏幕上，但是当它在较小的屏幕上呈现时出现问题，因为在主内容div的底部似乎没有空间。
这是我目前所拥有的： -
HTML：
<div id="container">
<div id="Navigation" class="transparent">
<div id="nav" class="transparent">
<div class="wrapper" class="transparent">
<div class="navigation" class="transparent">
<ul class="navigation-elements transparent" styles="cursor: pointer;margin-left: 10px;">
<li id="logo-li">
<a href="http://cms.manciniyoungphotography.com">
<img src="/img/logo.png" title="Mancini Young Photography" alt="Mancini Young Photography" id="icon"/>
</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='blog' onClick="navClick(this); autoScroll('blog');">
<a href='#blog' onClick="return false; navClick(this); autoScroll('blog');">Blog</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='contact' onClick="navClick(this); autoScroll('contact');">
<a href='#contact' onClick="return false; navClick(this); autoScroll('contact');">Contact</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='portfolio' onClick="navClick(this); autoScroll('portfolio');">
<a href='#portfolio' onClick="return false; navClick(this); autoScroll('portfolio');">Portfolio</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='about-us' onClick="navClick(this); autoScroll('about-us');">
<a href='#about' onClick="return false; navClick(this); autoScroll('about-us');">About Us</a>
</li>
<li style='cursor: pointer;' id='navigation-link' class='home selected' onClick="navClick(this); autoScroll('home')">
<!--<span class="glyphicon glyphicon-home" style="float: left;margin-left: 10%;"></span>-->
<a href='http://cms.manciniyoungphotography.com' onClick="return false; navClick(this);">Home</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="main" style='background: #dadada url("/img/background_shapes.png") repeat-y scroll center top, url("/img/blue_bg.png") repeat-x scroll left top transparent;'>
<div class="shapes">
<div id="inner-main">
<div class="wrapper">
<div id='firstBlockContainer'>
<div id='FBL'>
<div id="canvas-one" ></div>
<div id="canvas-two" ></div>
<div id="canvas-three" ></div>
<div id="home" class="parallax-cont"></div>
<div id="about-us" class="parallax-cont">
<div id="about-content" class="generic">
<div class="title">This is the title</div>
Hello, this is where the content for Mancini Young Photography's about us section will go.
</div>
</div>
<div id="portfolio" class="parallax-cont"></div>
<div id="contact" class="parallax-cont">
<div id="contact-us-header">
<img src="/img/logo.png" />
</div>
<div id="contact-us-form">
<form name="contact-us" method="POST" action="">
<input class="form-control" type="text" placeholder="Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Email" class="contact-form" />
<input class="form-control" type="text" placeholder="Company Name" class="contact-form" />
<input class="form-control" type="text" placeholder="Website" class="contact-form" />
<input class="form-control" type="text" placeholder="Telephone No." class="contact-form" />
<input class="form-control" type="textarea" placeholder="Message" class="contact-form" />
<input type="submit" class="form-control" />
</form>
</div>
</div>
<div id="blog" class="parallax-cont">
<div class="previous-button"></div>
<div id="blog_container">
<div id="postContainer"></div>
</div>
<div class="next-button"></div>
</div>
<div id="main-content"></div>
<script type="text/javascript" src="/js/blog-post-loader.js"></script>
</div>
</div>
</div>
</div>
</div>
<div id="footer" >
<div class="wrapper">
<div class="left leftFooter">
<ul class='selected' style='color: #fafafa'>
<a href='http://cms.manciniyoungphotography.com' >Home</a>
</ul>
<ul>
<a href='#portfolio' style='color: #fafafa;'>Portfolio</a>
</ul>
<ul>
<a href='#blog' style='color: #fafafa;'>Blog</a>
</ul>
<ul>
<a href='#about' style='color: #fafafa;'>About Us</a>
</ul>
<ul>
<a href='#contact' style='color: #fafafa;'>Contact</a>
</ul>
</div>
<div id="userFooterContents" ></div>
</div>
</br>
</div>
</div>
CSS：
#main-content {
z-index: 20;
position: absolute;
top: 90%;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100vh;
min-height: 800px;
vertical-align: top;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
}
#copyright {
position: fixed;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#main-content是内容主体所在的区域，我需要的差距是显示#footer和#copyright
以下是该网站的工作示例： http://cms.manciniyoungphotography.com/
答案 0 :(得分：0)
如果我明白这一点你可能会让事情变得有点过于复杂，但这只是我。 ：）
尝试以下更改：
#main-content {
top: 0;
z-index: 0;
}
#footer {
z-index: 1;
}
答案 1 :(得分：0)
根据我的理解，您需要全屏显示。有很多方法，但试试这个：
#main-content {
z-index: 20;
position: absolute;
top: 0;
bottom:0;
left:0;
right:0;
width: 100vw;
background: #dadada;
border-top: #0c0c0c;
height: 100%;
min-height: 800px;
vertical-align: top;
padding-bottom:10%;
z-index:-1;
}
#footer {
position: fixed;
z-index: 0;
bottom: 0;
min-height: 10%;
background: #26262B;
box-shadow: -1px -2px 8px #0c0c0c;
padding: 20px;
width: 100%;
z-index:2;
}
#copyright {
position: relative;
z-index: 2;
bottom: 0;
float: left;
background: #0c0c0c;
color: #A69F88;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
}