在CSS中的复杂高度

在我解释我想要做的事情之前，请注意，我只有针对Webkit（意思是说，我可以使用大量整洁的CSS）的好运气。因此，基本上，我想要一个具有灵活高度，固定位置，最大高度为可用窗口高度的块，块的顶部和底部有一些总是可见的元素，而在中间一个区域溢出自动。基本上看起来是这样的：在CSS中的复杂高度

 
---------------------- 
| Top item |  | 
|   |  | 
| stuff |  | 
|   |  | 
|   |  | 
| Last item |  | 
|------------  | 
|     | 
|     | 
---------------------- 

---------------------- 
| Top item |  | 
|-----------|  | 
| lots |^|  | 
| of |_|  | 
| stuff |_|  | 
|   | |  | 
|   | |  | 
|-----------|  | 
| Last item |  | 
----------------------

它可以用CSS来完成吗？或者我将不得不用JavaScript来破解它？我愿意接受一点小小的分歧 - 如果这就是做这件事的必要条件 - 更好的分隔 - 而不是试图解释每个愚蠢的小东西，比如重排和窗口大小调整以及所有这些废话。

我为坏消息做好了准备，这不是CSS可以做到的事情，但是我一直对SO的某些人可以工作的神奇感到惊喜。

来源

2008-10-21 eyelidlessness

好吧，我想通了，使用JavaScript代码，但没有复杂性，如果这是跨浏览器，这将是必要的。如果有人在意，我会公布答案。

标记：

<div class="complex-height"> 
    <div class="top"><!-- stuff --></div> 
    <div class="middle"><!-- stuff --></div> 
    <div class="bottom"><!-- stuff --></div> 
</div>

CSS：

.complex-height { 
    position: fixed; 
    top: 0; 
    left: 0; 
    max-height: 100%; 
    width: 300px; /* Can be whatever, but must specify a width */ 
    overflow: auto; 
} 
.complex-height .top, .complex-height .bottom { 
    width: 100%; 
    position: absolute; 
    z-index: 2; /* make sure they overlap the center */ 
} 
.complex-height .top { 
    top: 0; 
} 
.complex-height .bottom { 
    bottom: 0; 
}

的Javascript（假设原型，但琐碎写直线上升或其他LIB）：

$$('.complex-height .middle').each(function(middle) { 
    middle.setStyle({ 
     paddingTop: middle.up('.complex-height').down('.top').getHeight() + 'px', 
     paddingBottom: middle.up('.complex-height').down('.bottom').getHeight() + 'px' 
    }); 
}); 
$$('.complex-height').invoke('observe', 'scroll', function(e) { 
    this.down('.top').setStyle({ 
     top: this.scrollTop + 'px' 
    }); 
    this.down('.bottom').setStyle({ 
     bottom: (0 - this.scrollTop) + 'px' 
    }); 
});

来源

2008-10-21 19:18:08 eyelidlessness

这看起来像你的ticket

来源

2008-10-21 04:41:03

不，我想这或多或少与我所寻找的相反。如果现在还不清楚，我会澄清问题。 – eyelidlessness 2008-10-21 08:35:03

在CSS中的复杂高度

回答

相关问题