滾動div高度溢出頁腳並被隱藏

Question

我正試圖實現可滾動的div，其內容不會溢出頁腳後面。有一個側邊欄有一個搜索和下面的另一個隱藏的div，它顯示下面顯示的結果的過濾器選項。結果需要填充剩餘的高度並在沒有足夠空間時滾動。目前它溢出，所以我看不到底部結果，因爲它們被塞在頁腳後面。我很難得到結果div只填補剩餘的空間。

HTML：

<div id="header"> 
header 
</div> 
    <div id="map-wrapper"> 
    <div id="map-sidebar"> 
     <div id="map-search"> 
     <input id="search" type="text" class="form-control" placeholder="Enter location" /> 
     <div id="filters"> 
      <input/> 
      <input/> 
      <input/> 
     </div> 
     </div> 
     <div id="map-results"> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
     </div> 
    </div>  
    <div id="map"></div> 
    </div> 
    <div id="footer"> 
    footer 
    </div> 

CSS：

div { 
    border: 1px solid red; 
} 

#map-wrapper { 
    position: fixed; 
    top: 60px; 
    bottom: 30px; 
    left: 0; 
    right: 0; 
    width: 100%; 
} 

#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 250px; 
    background: blue; 
} 

#map-sidebar { 
    width: 250px; 
    height: 100%; 
} 

#map-search { 
    margin: 15px; 
} 

#map-results { 
    height: 100%; 
    overflow-y: scroll; 
    border: 1px solid purple; 
} 

#header { 
    height: 60px; 
    top:0; 
    left:0; 
    right:0; 
    position: fixed; 
    text-align: center; 
} 

#filters { 
    display: none; 
} 

#footer { 
    height: 30px; 
    bottom: 0; 
    left:0; 
    right:0; 
    position: fixed; 
    text-align: center; 
} 

的jsfiddle： https://jsfiddle.net/me6nceca/

感謝所有幫助

Answer 1

使用此而不是在CSS的#map-results：

其中元素

height: calc(100% - 60px); 

Answer 2

您已設置的所有div的屬性有1 px堅實的紅色邊框。從你的主CSS中刪除，你會看到地圖 - 結果顯示全屏幕，沒有干擾。

如果你想在一些div的紅色邊框，創建一個類，如：

.redBorder { 
    border: 1px solid red; 
} 

，並把它添加到你想接壤的div。由於您已將地圖設置爲「left：250px;」，因此您還需要爲您的頁腳聲明該地圖，使其與地圖的寬度相同（因此不會與地圖結果重疊）。請參閱更新的提琴：https://jsfiddle.net/john_h/me6nceca/2/

此紅色邊框對您而言可能很重要，因此請將該類添加到所需的特定div。

CSS：

.redBorder { 
    border: 1px solid red; 
} 

#map-wrapper { 
    position: fixed; 
    top: 60px; 
    bottom: 30px; 
    left: 0; 
    right: 0; 
    width: 100%; 
} 

#map { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 250px; 
    background: blue; 
} 

#map-sidebar { 
    width: 250px; 
    height: 100%; 
} 

#map-search { 
    margin: 15px; 
} 

#map-results { 
    height: 100%; 
    overflow-y: scroll; 
    border: 1px solid purple; 
} 

#header { 
    height: 60px; 
    top:0; 
    left:0; 
    right:0; 
    position: fixed; 
    text-align: center; 
} 

#filters { 
    display: none; 
} 

#footer { 
    height: 30px; 
    bottom: 0; 
    left: 250px; 
    right:0; 
    position: fixed; 
    text-align: center; 
    width: 63%; 
} 

HTML：無論你想在紅色邊框

<div id="header"> 
header 
</div> 
    <div id="map-wrapper"> 
    <div id="map-sidebar"> 
     <div id="map-search"> 
     <input id="search" type="text" class="form-control" placeholder="Enter location" /> 
     <div id="filters"> 
      <input/> 
      <input/> 
      <input/> 
     </div> 
     </div> 
     <div id="map-results"> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
      <p>content</p> 
     </div> 
    </div>  
    <div id="map"></div> 
    </div> 
    <div id="footer"> 
    footer 
    </div> 

只想補充一點，redBorder類。

Answer 3

嘗試更新的：

#map-results { 
    height: 80%; 
    overflow-y: scroll; 
    border: 1px solid purple; 
}