希望内部DIV在左侧面板中以100％的高度和页脚滚动

Question

对于商店定位器地图，我有一个左侧面板，其顶部有一个搜索，底部有一个页脚，我试图在左侧主体的可滚动DIV内显示搜索结果。

我不确定如何：

1. 让页脚DIV坚持到底部
2. 如果列表中的结果太多，请将“结果”DIV滚动。



如果没有为结果DIV设置固定高度，这似乎有效，有没有办法以100％的高度执行此操作？

这是我的JSFiddle：http://jsfiddle.net/mkov/X56Bz/

HTML

<div id="panel">
    <div id="search">
        <div>Find your closest store</div>
            <input id="input-search" onClick="SelectAll('input-search');"  type="text"  class="placeholder" placeholder="Enter a suburb or postcode">
            <span class="button" ><input value="Search" class="button" type="submit" tabindex="15"></span>
        </div>
    <div id="results" class="content">
        <ol>
        <li>Map Item 1A</li>
        <li>Map Item 1B</li>
        <li>Map Item 1C</li>
        <li>Map Item 1D</li>
        <li>Map Item 1E</li>
        </ol>
    </div>
    <div id="footer">Footer content goes here</div>
</div>
<div id="map-canvas"></div>

CSS

html,body { 
    padding:0; 
    margin:0;
    height:100%; 
    overflow: hidden; 
    font-family: Helvetica;
}
#panel { 
    position: relative;
    width:300px; 
    margin-left: 6px;
    margin-top: 6px;
}

#map-canvas { 
    background:white; 
    position:absolute; 
    top:0; 
    left:320px; 
    right:0; 
    bottom:0; 
    margin: 6px; 
    border: 1px solid #D2E6F0; 
    border-radius: 3px;
}

#search {
    width: 300px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #F2F9FB;
    border: 1px solid #D2E6F0;
    height: 60px;
    padding-left: 10px;
    padding-top: 10px;

}

#results { 
    margin-top: 5px;
    position: relative; 
    width: 300px;
    color: #003464;
    border: 1px solid #D2E6F0;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding-left: 10px;
    overflow-x: auto;

}

#footer {
    background-color: #003464;
    margin-top: 5px;
    position: relative; 
    width: 300px;
    color: #FFFFFF;
    border: 1px solid #003464;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding-left: 10px;
}}

Answer 1

CSS3救援专门“计算”

Here是一个更新的小提琴

http://jsfiddle.net/X56Bz/3/

你需要让你的#panel高度为100％而#results必须是100％高度减去你的#search和#footer身高

我添加了以下内容......

#panel {
    height: 100%;
}

#results {
    /* Firefox */
    height: -moz-calc(100% - 115px);
    /* WebKit */
    height: -webkit-calc(100% - 115px);
    /* Opera */
    height: -o-calc(100% - 115px);
    /* Standard */
    height: calc(100% - 115px);    
}

Answer 2

只需添加这些jquery代码行并观察效果......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    setHeight();
});
function setHeight(){
    var totalHeight = $("#map-canvas").outerHeight();
    var searchHeight = $("#search").outerHeight();
    var footerHeight = $("#footer").outerHeight();

    var resultsHeight = totalHeight - (searchHeight + footerHeight + 12); 
    $("#results").css("height",resultsHeight + "px"); 
}
</script> 

Answer 3

http://jsfiddle.net/raamaragavan/2xkcn/

<div id="results" class="content" style="overflow:hidden;position:absolute;">
            <div style="overflow-y:scroll;height:90%;">
           <ol>
    <li>Map Item 1A</li>
    <li>Map Item 1B</li>
    <li>Map Item 1C</li>
     <li>Map Item 1D</li>
    <li>Map Item 1E</li>
     <li>Map Item 1F</li>
   <li>Map Item 1G</li>
    <li>Map Item 1H</li>
   <li>Map Item 1I</li>
   <li>Map Item 1J</li>
    <li>Map Item 1K</li>
   <li>Map Item 1L</li>
    <li>Map Item 1M</li>
  <li>Map Item 1N</li>
    <li>Map Item 1O</li>
    <li>Map Item 1P</li>
   <li>Map Item 1Q</li>
  <li>Map Item 1R</li>
 <li>Map Item 1S</li>
 <li>Map Item 1T</li>
 <li>Map Item 1U</li>
 <li>Map Item 1V</li>
 <li>Map Item 1W</li>
  <li>Map Item 1X</li>
  <li>Map Item 1Y</li>

  </ol>
            </div>
  </div>
 css code
    #results{ 
  margin-top: 5px;
  position: relative; 
  width: 300px;
  height:500px;
  color: #003464;
  border: 1px solid #D2E6F0;
  border-radius: 3px;
  -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
  padding-left: 10px;
  overflow-x: auto;

  }

  #footer{
  background-color: #003464;
  margin-top: 5px;
  position: relative; 
  width: 300px;
  position:fixed;
  bottom:0px;
   color: #FFFFFF;
  border: 1px solid #003464;
  border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   padding-left: 10px;
  } 

Answer 4

你可以计算窗口的高度并减去页脚高度并将其应用到div ...请参阅此fiddle ..我在javascript中添加了以下代码

var a3 = $(window).height();
var s1=a3-120;
$("#results").css({'height':+s1+'px'});

Answer 5

检查this是否可以帮助您

JQuery的

var windowHeight = $(window).height();
var searchHeight = $('#search').height();
var footerHeight = $('#footer').height();
var resultsHeight = windowHeight - searchHeight - footerHeight - 40 /*Space in between*/

$('#results').css('height',resultsHeight)