css框架佈局在IE 6及以上版本中無法正常工作

我正在嘗試使用DIV來模擬框架來製作CSS頁面佈局。css框架佈局在IE 6及以上版本中無法正常工作

我想要一個固定的頂部窗格，它具有固定的高度，並且在調整頁面大小時寬度會拉伸和縮小。（固定的意思，如果用戶向下滾動頁面，頂部窗格始終可見）

下面，我想要兩列。當您調整窗口大小時，左列具有固定寬度，右列寬度拉伸。必要時，兩列應具有垂直滾動條。

我的代碼似乎在Chrome中運行良好，但在IE中，滾動條不顯示在左側或右側列中。

有什麼我可以做的，以解決這個問題？也許一些JavaScript告訴IE正確繪製滾動條？

風格：

body{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
} 

#framecontentTop{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 108px; /*Height of frame div*/ 
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background-color: navy; 
    color: white; 
} 

#framecontent{ 
    position: absolute; 
    top: 108px; 
    left: 0px; 
    bottom: 0px;  
    width: 200px; /*Width of frame div*/ 
    float:right; 
    overflow: auto; /*Disable scrollbars. Set to "scroll" to enable*/ 
    background: navy; 
    color: white; 
    /*padding: 108px 0 0 200px; */ /*Set value to (0 0 0 WidthOfFrameDiv)*/ 
} 


#maincontent{ 
    position: absolute; 
    top: 108px; 
    left: 200px; /*Set left value to WidthOfFrameDiv*/ 
    right: 0px; 
    bottom: 0px; 
    float:right; 
    overflow: auto; 
    background: #fff; 
} 


* html body { /*IE6 hack*/ 

} 


* html #maincontent{ /*IE6 hack*/ 
    height: 100%; 
    width: 100%; 
}

腳本：

<script type="text/javascript"> 
/*** Temporary text filler function. Remove when deploying template. ***/ 
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"] 
function filltext(words){ 
for (var i=0; i<words; i++) 
document.write(gibberish[Math.floor(Math.random()*3)]+" ") 
} 
</script>

html正文：

<div id="framecontentTop"> 
<h1>CSS Top Frame Layout</h1> 
<h3>Sample text here</h3> 
</div> 


<div id="framecontent"> 
<h1>CSS Left Frame Layout</h1> 
<p><script type="text/javascript">filltext(25)</script></p> 
</div> 


<div id="maincontent"> 
<h1>Dynamic Drive CSS Library</h1> 
<p><script type="text/javascript">filltext(255)</script></p> 
<p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p> 
</div> 


</body> 
</html>

來源

2010-11-17 Loser Ateverything

請重新設置您的問題中的代碼，即輸入框（textarea）下方的框，您可以在提交之前預覽帖子。 – 2010-11-17 03:05:08

您需要在#maincontent和#framecontent div的設置高度或自己永遠滾動，他們會舒展到適合他們的內容。高度百分比可能會給IE帶來麻煩，並且可能會導致意想不到的結果（以我卑微的體驗）。你有沒有嘗試刪除只有IE瀏覽器的CSS？

此外，要更正CSS中的註釋，overflow：auto不會禁用滾動條。它們在不需要時隱藏它們，並在它們出現時顯示它們。

來源

2010-11-17 03:16:21

css框架佈局在IE 6及以上版本中無法正常工作

回答

相關問題