使用div填充剩余的动态高度并在不使用JavaScript的情况下滚动 [英] Make a div fill the remaining dynamic height and scroll without javascript

问题描述

我有一个文档结构，它将标题保留在页面顶部，页脚位于最下面。只要中间的内容小于窗口的高度，它就工作得很好。如果内容太长，页脚会进一步向下推动并显示完整的主体滚动条。
如何让滚动条被限制为内容DIV。

请注意，页眉和页脚的内容并不固定，所以我没有知道这些元素的高度，并且不能将内容元素的顶部位置设置为固定值。我在示例中添加了一个显示/隐藏功能来演示这一点。

我试图用纯CSS解决这个问题（避免使用Javascript）。我知道使用JavaScript，我可以监视窗口大小和元素可见性的变化，我可以计算页眉和页脚的高度，并将固定尺寸设置为内容元素。但有没有非JavaScript解决方案？

http： //jsfiddle.net/sA5fD/1/

  html {height：100％; } 
 body {
 padding：0 0; 
保证金：0 0; 
身高：100％; 
} 
 #main {
 display：table; 
身高：100％; 
宽度：100％; 
} 
 #header，#footer {
 display：table-row; 
背景：＃88f; 
} 
＃more {
 display：none; 
} 
 #content {
 display：table-row; 
身高：100％; 
背景：＃8f8; 
} 
  

它适用于所有现代浏览器，台式机，平板电脑和手机。如果您添加两个换行块：

$ b 对于旧浏览器，完整的主体滚动条就可以了。
$ b

 < div id =content> 
< div id =content-scroll-wrap> 
< div id =content-scroll> 
 content ... 
  

然后使用CSS：

 ＃content-scroll-wrap {
 position：relative; 
身高：100％; 
} 
＃content-scroll {
 position：absolute; 
 top：0;底部：0; 
剩下：0;正确：0; 
溢出：auto; 
} 
  

http://jsfiddle.net/sA5fD/8/

不了解旧版浏览器的支持情况。 IE可能需要一些修补程序。

I have a document structure that maintains the header at the top of the page and the footer at the bottom. It's working well as long as the content in the middle is less than the height of the window. If the content is too long, the footer gets pushed further down the page and a full body scrollbar is displayed. How can I get the scrollbar to be limited to the content DIV.

Note that the content of the header and footer are not fixed so I don't know the height of those elements and can't set the top position of the content element as a fixed value. I've added a show/hide feature in the example to demonstrate this.

I'm trying to resolve this in pure CSS (avoiding Javascript). I know that using javascript, I could monitor changes to window size and element visibility, I could calculate the height of the header and footer and set fixed dimensions to the content element. But is there a non-javascript solution?

http://jsfiddle.net/sA5fD/1/

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
}
#main {
    display:table;
    height:100%;
    width:100%;
}
#header, #footer {
    display:table-row;
    background:#88f;
}
#more {
    display: none;
}
#content {
    display:table-row;
    height:100%;
    background:#8f8;
}

It should work for all modern browsers, desktop, tablets and mobiles. For old browsers, a full body scrollbar would be ok.

解决方案

If you add two wrap blocks:

<div id="content">
  <div id="content-scroll-wrap">
    <div id="content-scroll">
      content...

Then use CSS:

#content-scroll-wrap {
    position: relative;
    height: 100%;
}
#content-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
}

http://jsfiddle.net/sA5fD/8/

Don't know about support in old browsers. IEs might need some fixes.

这篇关于使用div填充剩余的动态高度并在不使用JavaScript的情况下滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！