如何使內容佔用100％的高度和寬度

我很親密，但無法像我想要的那樣工作。我試圖讓標題和菜單始終可見，並讓內容佔據視圖屏幕的其餘部分，並在溢出時擁有自己的滾動條。問題是內容的寬度沒有被拉伸到正確的位置，我的頁面中間出現了一個滾動條。如果我將高度設置爲100％，我想也可以使用整個窗口高度來代替剩下的剩餘窗口高度。如何使內容佔用100％的高度和寬度

我只使用IE7或更好的版本，所以需要擔心javascript，如果能解決這個問題，我並不反對使用jQuery！

http://pastebin.com/x31mGtXr

來源

2010-05-07 Hiro2k

這是如何結束爲好奇的任何人。我不得不使用一些jQuery作弊，但它做到了這一點，現在當我調整它的大小時，它看起來也很棒。 :)

<style type="text/css"> 
     html, body { 
      height: 100%; 
      font-family: 'Calibri','Tahoma','Arial', sans-serif; 
      font-size: 14px; 
      overflow: hidden; 
     } 
     #top{ 
      width: 100%; 
     } 
     #container{ 
      width: 100%; 
      overflow: auto; 
     } 
     #menu { 
      float: left; 
      width: 12em; 
     } 
     #content {     
      overflow: auto; 
      border-left: black solid 1px; 
      padding: 0 0 0 .5em; 
     } 
</style> 

<script type="text/javascript"> 
     function rez(){ 
      $('#content').css('height', $(window).height()-$('#top').height()); 
      $('#content').css('min-height', $('#menu').height());     
      $('#container').css('height', $(window).height()-$('#top').height()); 
     }; 
     $(window).resize(function() { 
      rez(); 
     }); 
     $(window).load(function() { 
      rez(); 
     }); 
</script> 


<body> 
    <div id="top"> 
     <tiles:insert page='/WEB-INF/jsp/template/header.jsp'/> 
     <div id="top-space" style="border-bottom: gray solid 1em;"></div> 
    </div>   
    <div id="container">    
     <div id="menu"> 
      <tiles:insert page='/WEB-INF/jsp/template/menu.jsp'/> 
     </div> 
     <div id="content"> 
      <tiles:get name='content'/> 
     </div> 
    </div> 
</body>

來源

2010-05-07 22:14:00 Hiro2k

像this？

html, body { 
    height: 100%; 
    font-family: 'Calibri','Tahoma','Arial', sans-serif; 
    font-size: 14px; 
    margin:0; 
    padding:0; 
} 
#container{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 
#content { 
    min-height: 100%; 
    overflow: auto; 
    height:90%; 
    float: left; 
    margin-left:12em; 
    border-left: black solid 1px; 
    padding: 0 0 0 .5em; 
}

來源

2010-05-07 16:31:00

關閉，但當瀏覽器內容溢出時，仍然在瀏覽器中間出現一個滾動條。 – Hiro2k 2010-05-07 17:04:12

如果你得到水平滾動條，你可以嘗試在'＃content'上放一些'width'。我非常抱歉，但我目前沒有IE7方便測試這一點，但也請注意，這在Chrome中不起作用（''content'上的'width'設置爲％，但如果將它設置爲px或EM。） – 2010-05-07 17:29:56

我得到窗口中間的垂直滾動條。我可以設置＃內容寬度，但我怎麼知道需要多少空間才能填滿窗口的其餘部分？ – Hiro2k 2010-05-07 17:47:31

的「內容」分區刪除浮動聲明，它會被拉伸以適應父寬度，取消對同格邊距，因爲它是不必要的，並且導致了Chrome的問題。

Re：高度問題......是「頂部」div是否定義了高度？如果是這樣，你可以有以下類似的設置（雖然有點髒）：

#container { 
    height: 100%; 
    position: relative; 
    width: 100%; 
} 
#top { 
    height: 100px; // assumes top has a defined height 
    left: 0; 
    position: absolute; // lay it on top of the page 
    top: 0; 
    width: 100%; 
} 
#menu { 
    float: left; 
    margin-top: 100px; // push content down by value of top 
    width: 12em; 
} 
#content { 
    height: 100%; 
    overflow: auto; 
} 
#topSpacer { 
    height: 100px; // push content down by value of top 
}

然後，只需間隔添加到內容得好：

<div id="content"><div id="topSpacer"></div></div>

如果你是嚴格的關於你的語義，或「頂部」div的寬度是不同的，那麼你可以生成一個JavaScript解決方案，在負載和瀏覽器時，將「content」的高度設置爲「top」的高度（視口高度 - 「頂部」）調整大小。對於像jQuery這樣的框架來說很簡單，而不是沒有一個框架。

來源

2010-05-07 18:11:38 Andrew

這應該工作我認爲。它在FF中沒有區別，它仍然不能在Chrome中工作，但它應該適用於IE。 – 2010-05-07 18:21:19

是的，右側的滾動條位於瀏覽器下方，有點難以描述。這是一張照片。 http://img687.imageshack.us/img687/4526/22037006.png – Hiro2k 2010-05-07 18:42:42

正如比利所說，也刪除了保證金，這將解決Chrome中的問題。另外，請參閱截圖中有關該問題的更新後的帖子。 – Andrew 2010-05-07 18:46:21

脫掉左邊距。當浮動元素在浮動的同一側上包含填充時，IE會將邊距加倍。將它添加到填充或更好，它包含的元素的填充..像P.

來源

2010-05-07 18:35:55 Billy

我沒有刪除邊距，並用1em填充替換它。我忘了提到這一點。 – Hiro2k 2010-05-07 18:44:11

就這樣我們都清楚，這是我擁有的文檔的當前版本，它展示了Chrome，Firefox和IE7屏幕截圖中的行爲。 http://pastebin.com/FiUC0zcC – Hiro2k 2010-05-07 18:55:35

如何使內容佔用100％的高度和寬度

回答

相關問題