Fatal编程技术网
  • html/
  • Html IE8剩余高度

Html IE8剩余高度

html css internet-explorer layout internet-explorer-8

Html IE8剩余高度,html,css,internet-explorer,layout,internet-explorer-8,Html,Css,Internet Explorer,Layout,Internet Explorer 8,我的目标是在IE8和IE9中实现这样的结构。 不想使用JavaScript，因为某些第三方正在动态插入内容，这只会导致不同的滚动条比例 我一直在寻找“充足”的时间，即相当多的时间。 我未能理解和/或使用以下线程 某些高度未知的文本，固定在顶部 一些内容物不会超过身体（100%高度）， 但会填满身体，直到内容太长，这会给 滚动条。 我可以在Chrome（pic=整个浏览器内容）中实现这一点，底部是fiddler： IE8/9给了我这个（pic=整个浏览器内容，再次滚动到正文底部）： 谁能

我的目标是在IE8和IE9中实现这样的结构。
不想使用JavaScript，因为某些第三方正在动态插入内容，这只会导致不同的滚动条比例

我一直在寻找“充足”的时间，即相当多的时间。 我未能理解和/或使用以下线程


某些高度未知的文本，固定在顶部

一些内容物不会超过身体（100%高度），
但会填满身体，直到内容太长，这会给
滚动条。
我可以在Chrome（pic=整个浏览器内容）中实现这一点，底部是fiddler：

IE8/9给了我这个（pic=整个浏览器内容，再次滚动到正文底部）：

谁能帮我？

我看到你用的是div而不是iframe，这是一把应该可以用的小提琴。 使用定位元素

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

我厌倦了不去完成我想要的事情，最终我不得不使用JS（我意识到没有人能够成功地回答我的问题，而这个解决方案也不是我真正问的）

小提琴比下面显示的更复杂，因为我需要这些额外的东西

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>

功能调整高度（）{
var header=document.getElementById（“header”）；
var container=document.getElementById（“容器”）；
container.style.top=header.clientHeight+“px”；
}
//注意方法调用（'asap'）、adjustHeight（）的位置


第1行

第2行

第3行

第4行



切换
调整高度（）；
第一行可见


滚动条正常显示

正文不滚动

也适用于调整大小（默认情况下）

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..

一行..


折叠/展开时最后一行可见
除非在我回答问题后发生了一些变化，否则我认为在IE8中不可能没有一点JavaScript。如果页面调整了大小，可能会导致白色区域被包裹，这可能涉及到创建一个调整大小处理程序：/我并不是想以此来回答你的问题。我的意思是，当我试图回答这个问题时，我记得在IE8中尝试了一切，试图制造出与您试图解决的问题相同的东西。可能是@Peter O的副本，该帖子没有动态页眉高度。尝试得不错，但白色“页眉”部分必须是可变高度： 
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>