Javascript 如何使用未知内容和固定布局垂直居中内容

我有一个简单的页眉、页脚和中间内容的布局，每个这样的部分都有未知的高度。目标是使页眉向上，页脚向下，内容居中，仅在需要时才显示垂直滚动条。我可以通过下面列出的代码来处理页眉、页脚和滚动条，但我找不到一种方法来将内容集中在两者之间

这是一把小提琴：

---

>>HTML: >>脚本：

---

您可以使用CSS和更改HTML标记来实现这一点

活生生的例子：

CSS

---

HTML

---

---

您可以使用CSS和更改HTML标记来实现这一点

活生生的例子：

CSS

---

HTML

---

---

---

为什么不把页脚和页眉添加为固定元素？@阿尔瓦罗-允许在滚动时允许滚动，但是你只想要中间部分的滚动吗？@阿尔瓦罗-不，整个页面/文档为什么不添加页脚和页眉作为固定元素？@阿尔瓦罗-当它被允许的时候允许滚动，但是你只想要中间部分的滚动吗？@阿尔瓦罗-不，整个页面/文档文件，你的代码> 48 px < /代码>来自哪里？内容将是未知的，所以它的高度。除了这一点，测试你的小提琴，并将其调整到最小高度，看看它无论如何都不工作…为什么它在最小高度不工作？我看到一个滚动条，它全部滚动。。。请详细说明你真正想要发生什么@ΩmegaΔ我在这里发表了评论。。。来自页眉和页脚。页眉和页脚的内容未知，因此其高度未知。您的

48px

适合示例中的内容，但当页眉或页脚的此类内容（动态）发生变化时，您的代码/解决方案将无法工作@Ω你忘了提那件事了。但是无论如何，只要使用jQuery获得新的高度，并使用

$.css将其应用于
#container
元素即可。利用jQuery的
resize
事件触发您的代码。那么，您的
48px
来自哪里？内容将是未知的，所以它的高度。除了这一点，测试你的小提琴，并将其调整到最小高度，看看它无论如何都不工作…为什么它在最小高度不工作？我看到一个滚动条，它全部滚动。。。请详细说明你真正想要发生什么@ΩmegaΔ我在这里发表了评论。。。来自页眉和页脚。页眉和页脚的内容未知，因此其高度未知。您的
48px
适合示例中的内容，但当页眉或页脚的此类内容（动态）发生变化时，您的代码/解决方案将无法工作@Ω你忘了提那件事了。但是无论如何，只要使用jQuery获得新的高度，并使用
$.css将其应用于
#container
元素即可。利用jQuery的
resize
事件触发代码。
<div id="container">
  <div id="header">
    <div id="headerText">
      header header header
    </div>
  </div>
  <div id="content">
      center text here
  </div>
  <div id="footerPadding">
  </div>
  <div id="footer">
    <div id="footerText">
      footer footer footer footer footer footer footer footer footer footer 
      footer footer footer footer footer footer footer footer footer footer 
    </div>
  </div>
</div>

html, body {
    border: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
    font-family: Verdana;
    font-size: .9em;
    color: black;
    height: 100%; /* needed for container min-height */
}

div {
    display: block;
    overflow: hidden;    
}

div#container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    width: 100%;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}

div#header, div#footer {
    margin: 0;
    width: 100%;
}

div#footer {
    position: absolute;
    bottom: 0; /* stick to bottom */
}

div#headerText, div#footerText {
    padding: 1em 0;
    text-align: center;
    white-space: nowrap;
}

div#headerText {
    border-bottom: .5em double gray;
}

div#footerText {
    border-top: .5em double gray;
}

function myResize() {
  $('#footerPadding'  ).css('height', $('#footer').css('height'));
}

$(window).resize(function(){
  myResize()
});

myResize();

#header{
    position:absolute;    
    top:0;
}
div#footer{
    position:relative;
    display:table-row;
}
#container{
    padding:  48px 0 0 0; //48px from the header 
    display:table;
   -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
         box-sizing: border-box; 
}
#content{
    display:table-cell;
    vertical-align:middle;
    height:100%;
}

<div id="header">
    <div id="headerText">header header header</div>
</div>
<div id="container">
    <div id="content">
        <div class="box">center text here</div>
        <div class="box">center text here</div>

    </div>
    <div id="footer">
        <div id="footerText">footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer footer</div>
    </div>
</div>

function myResize() {
    var headerHeight = $('#header').height();
    var windowsWidth = $(window).width();
    $('#footerPadding').css('height', $('#footer').css('height'));
    $('#container').css('padding-top', headerHeight + 'px');
    $('#footerText').css('width', windowsWidth + 'px');
}