прокрутка 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, и вы увидите, что отображение результатов на карте полностью отображается без помех.

Если вы хотите красную границу на некоторых дивы, создать класс, как:

.redBorder { 
    border: 1px solid red; 
} 

и добавить его в дивы вы хотели бы граничили.

Поскольку у вас есть карта, расположенная в «left: 250px;», вы также захотите объявить это для своего нижнего колонтитула так, чтобы она была такой же ширины, как и карта (и, следовательно, не перекрывала ваши mapresults). См. Обновленную скрипту: 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; 
}