如何限制瀏覽器內的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讓我知道這是否是你想要完成的事情。