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拳擊模型（針對最新的瀏覽器時）
• 當你不關心保持精確的頁腳和頁眉元素高度你可以去所有元素的百分比高度。