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

Question

我一直在为我所知道的事情而苦苦挣扎!

我有一个丑陋的旋转馅饼(不要问)，它的位置应该放在主页窗口的底部，只显示馅饼的上半部分，其余部分隐藏 - 所以中心axis 应该位于浏览器窗口的底部。我正在尝试设置它 (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 让我知道这是否符合您想要完成的目标。