如何限制浏览器中的div高度，使其不垂直滚动，并修复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>

如果你想了解它应该如何工作，这里有一个链接（我知道它很可怕——这不是我的错！）：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让我知道这是否符合你想要实现的目标。