CSS强制页面至少为100％

Question

这使我疯了，我只是无法让它工作，我想如何（我尝试过搜索论坛，但无法找到修复我的代码的方法）。我希望我的页面布局达到窗口高度的100％。

的的jsfiddle是在这里： http://jsfiddle.net/JvPc2/3/embedded/result/显示问题

更新：的的jsfiddle是在这里：http://jsfiddle.net/JvPc2/4/embedded/result/显示问题

一个页面的HTML如下：

<div id="wrapper"> 
     <div id="headcontainer" > 
      <div id="headerleft"> 
       <h1> 
        Bringing Them Home 
       </h1> 
      </div> 
      <div id="headerright"> 
       <h2> 
        Tagline to go here? 
       </h2> 
      </div> 
      <div id="splitbar"></div> 
      <div id="navleft"> 
        <a href="/"><span class="outer"><span>Home</span></span></a><a href="the30.php"><span class="outer"><span>The 30</span></span></a><a href="thehall.php"><span class="outer"><span>Memorial Hall</span></span></a><a href="research.php"><span class="outer"><span>Research Page</span></span></a> 
      </div> 
      <div id="navright"> 
        <a href="about.php"><span class="outer"><span>About</span></span></a><a href="tour.php"><span class="outer"><span>Virtual Tour</span></span></a><a href="schools.php"><span class="outer"><span>School Work</span></span></a><a href="links.php"><span class="outer"><span>Links</span></span></a> 
      </div> 
      <div id="splitbar"></div> 
     </div> 
     <div id="maincontainer" > 
      <div id="maincontentleft"> 
       <p> 
        On this page you will find some relevant links to find out more information: 
       </p> 
       <p> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
       </p>  
      </div> 
      <div id="maincontentright" > 
       <p> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
        <a href="/">Bringing Them Home site</a><br /> 
       </p> 
      </div> 
     </div> 
     <div id="footercontainer"> 
     <div id="splitbar"> 
     </div> 
      <div id="footerleft"> 
       <p> 
        &copy;Stefan Wright Web Design 2014 
       </p> 
      </div> 
      <div id="footerright"> 
       <p> 
        Contact the webmaster <a href="mailto:webmaster@bringingthemhome.co.uk">here</a>. 
       </p> 
      </div> 
     </div> 
    </div> 

该CSS如下：

html{min-height:100%;position:relative} 
body{background-image:url('../images/bg_leather.png');margin:0px;height:100%} 
#wrapper{height:100%;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;} 
#adminoverlay{z-index:10;width:100%;background:whitesmoke;position:relative;top:0;} 
#adminoverlay p{margin:0px} 
#headcontainer{width:100%;min-width:697px;height:20%;font-family:'MyUnderwood'} 
#headerleft,#headerright{margin-bottom: 0px;text-align: center;background-image: url('../images/bg_content_rep.png');background-size: cover;width:48%;height:50%;min-height:62px;float:left;margin-left:1%} 
#headerright h2{line-height: 2em;-webkit-margin-before: 0.80em;-webkit-margin-after: 0.80em;} 
#navleft,#navright{width:48%;min-width:320px;height:40%;min-height:50px;margin-left:1%;float:left;font-family:'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-size: cover;} 
#navleft a,#navright a{float: left;text-align: center;width: 21%;padding-left:2%;padding-right:2%;max-width: 131px;height:100%;font-size: 19px;color: black;} 
#splitbar{background-image: url('../images/bg_content_top.png');background-size: cover;background-position: center top;height: 10%;width:100%;float: left;min-width:320px} 
#maincontainer{width:100%;min-width:697px;min-height:68%;min-height:250px;clear:both} 
#maincontentleft,#maincontentright{width:42%;min-width:320px;height:100%;margin-left: 1%;padding-left: 3%;padding-right:3%;float: left;font-size: 14px;font-family: 'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-repeat: repeat-y;background-position: left top;background-size: 100%;} 
#footercontainer{width:100%;min-width:697px;height:10%;min-height:50px;clear:both} 
#footerleft,#footerright{width:42%;min-width:320px;height:90%;margin-left:1%;float:left;font-family:'MyUnderwood';background-image: url('../images/bg_content_rep.png');background-size: cover;padding-left:3%;padding-right: 3%;} 

编辑：删除了网站的URL并包含JSFiddle。

Answer 1

经过一些修补之后，我通过将maincontenttrft和maincontentright div移出容器div来得到这个工作。感谢您的帮助

Answer 2

懒惰的解决方案

不丢失您宝贵的时间，我建议去一个JS的解决方案，这将是简单地取父母的身高和所有。减去除集装箱内容。

其他解决方案

• 考虑更换把持的背景
• 使用Flex拳击模型（针对最新的浏览器时）
• 当你不关心保持精确的页脚和页眉元素高度你可以去所有元素的百分比高度。