如何限制浏览器内的div高度，以免垂直滚动PLUS修复div /浏览器窗口底部的div内容？

Question

我一直在努力，我知道的不是我做的那么难！

我有这个丑陋的旋转馅饼（不要问），它的位置应该位于主页窗口的底部，只显示馅饼的上半部分，其余部分隐藏 - 所以中心轴应位于浏览器窗口的底部。我试图设置它（1），以便带有bg照片的主页容器div不会在可见浏览器窗口下展开，并且不会显示垂直滚动条，然后将饼图正确放置在其中，上半场演出。

帮助??

这里有一个的jsfiddle这是一个有点乱 - 馅饼不旋转，但我真的只需要制定出安置：http://jsfiddle.net/bwL5bxdf/

下面是相关的CSS：

.home2 {   
    background-image:url(img/001.jpg); 
    background-repeat: no-repeat; 
    background-position: center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height:200px; 
    max-width:1200px; 
    overflow:none; 
    } 
body { 
    background-image:url(img/curtains.png); 
    background-size:cover; 
    background-repeat:no-repeat; 
    background-position:top center; 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    position:relative; 
    z-index:-1; 
    padding-top:30px; 
} 

figure#wheel-wrap { 
    position:relative; 
    margin:0 auto; 
    top:50%; 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
} 

#wheel { 
    width: 50%; 
    height:auto; 
    position:relative; 
    overflow:hidden; 
    float:left; 
} 

#wheel img{  
    left: 0px; 
    width: 100%; 
    height:auto; 
    position:relative; 
} 

#leftarrow {  
    position: relative; 
    width: 25%; 
    height: auto; 
    overflow: hidden; 
    float:left; 
} 
#leftarrow img{ 
    width:100%; 
} 
#leftarrow:hover{ 
    cursor: pointer; 
} 

#rightarrow { 
    position: relative; 
    float:left; 
    width: 25%; 
    height: auto; 
    overflow: hidden; 
} 
#rightarrow img{ 
     width:100%; 
} 
#rightarrow:hover{ 
    cursor: pointer; 
} 

下面是相关片HTML的：

<div class="container"> 
<div class="row"> 
<div class="col-lg-12 col-sm-12"> 
<div class="home2" style="min-height:500px;"> 

<figure id="wheel-wrap"> 
     <div id="leftarrow"> 
     <img src="http://www.bluetabby.net/rr/img/leftarw.png" width="100%"> 
     </div> 
    <div id="wheel"> 
    <img id="wheel2" src="http://www.bluetabby.net/rr/img/pie.png" usemap="#Pie" /> 
    </div> 
    <img class="marker" src="http://bluetabby.com/rr/img/marker.png" /> 
<div id="rightarrow"> 
<img src="http://www.bluetabby.net/rr/img/rtarw.png" width="100%"></div> 
</figure> 

</div> 

这里有一个链接，如果你想看到的它应该如何工作的appoximation（我知道它的可怕 - 它不是我的错！）：http://bluetabby.net/rr/index21.html

谢谢！

Answer 1

我已经更新了你的jsfiddle：http://jsfiddle.net/peterdotjs/m9j6mgp6/

我做这让我怀疑，我还没有完全掌握所需的交互一些简单的改变。

#wheel { 
    width: 100%; //changed 
    height:auto; 
    position:fixed; //changed 
    overflow:hidden; 
    float:left; 
} 

#wheel img{ 
    left: 0px; 
    width: 50%; //changed 
    height:auto; 
    position:relative; 
} 

@Haikukitty让我知道这是否是你想要完成的事情。