IE8剩餘高度

我在IE8（& IE9）中尋找這樣的結構。
不想使用JavaScript，因爲某些第三方會動態插入內容，這應該只會導致不同的滾動條比例。IE8剩餘高度

我一直在尋找「充足」的時間，即相當多的時間。我無法理解和/或使用以下線程。 StackOverflow: make-iframe-to-fit-100-of-containers-remaining-height

<!DOCTYPE html> 
<html> 
    <body> 
     <p>Some text with unknown height, fixed at the top.</p> 
     <div> 
      Some content that will not exceed the body (100% height), 
      but will fill the body until the content is too long, which would give 
      a scrollbar. 
     </div> 
    </body> 
</html>

我能夠在Chrome瀏覽器（PIC =整個瀏覽器的內容）來實現這一點，小提琴手在底部：

Chrome example

IE8/9給了我這個（PIC =整個瀏覽器內容，再滾動到身體的底部）：

IE messes up

Chrome's fine, fiddler.

誰能幫助我？

來源

2012-11-23 EricG

除非因爲我回答的東西已經改變了[這個問題]（http://stackoverflow.com/questions/10294543/overflow-with-absolute-relative-positioning-layout/10297421#10297421），我不沒想到在IE8中可能沒有一點JavaScript。 – thirtydot

這可能涉及如果頁面調整大小，可能會導致白色區域包裝，使調整大小處理程序..：/ – EricG

我不是建議作爲您的問題的答案。我的意思是，我記得試圖回答這個問題，嘗試在陽光下做的一切事情，在IE8中做出與你正試圖解決的問題相同的事情。 – thirtydot

由於勞累不完成我想要的東西，我被迫畢竟用JS（我知道沒有人能夠成功地回答了我的問題的確，這種解決方案的心不是任何什麼，我居然問）。

JSfiddle

的小提琴比什麼如下所示更爲複雜，因爲我需要這個額外的東西。

function adjustHeight() { 

    var header = document.getElementById("header"); 
    var container = document.getElementById("container"); 

    container.style.top = header.clientHeight + "px"; 
} 

// Note the place of the method invocation ('asap'), adjustHeight() 
<body> 
    <div id="header"> 
     <p id="p"> 
      Line1<br/> 
      Line2<br/> 
      Line3<br/> 
      Line4<br/> 
     </p> 
     <div id="toggle">Toggle</div> 
    </div> 
    <div id="container"> 
     <script>adjustHeight();</script> 
     <div id="content"> 
      First row visible<br/><br/> 
      Scrollbar shows normally<br/> 
      Body doesnt scroll<br/> 
      Works on resize too (by default)<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/> 
      One row..<br/><br/> 

      Last row visible on collapsed/expanded 
     </div> 
    </div> 
</body>

來源

2012-11-26 10:25:43 EricG

我看到你在這裏使用div而不是iframe，這裏是一個應該工作的小提琴。使用定位元素的。

position:absolute; 
bottom:0px; 
top:80px; 
left:0px; 
right:0px;

http://jsfiddle.net/XQbzy/1/

來源

2012-11-23 12:52:16

不錯的嘗試，但白色的「標題」部分必須是可變的高度：http：//jsfiddle.net/thirtydot/XQbzy/2/ – thirtydot

是的，否則你會使頂部標題滾動也... –

回答

相關問題