创建可滚动元素并将大小设置为匹配窗口 [英] Create Scrollable Element and Set Size to Match Window

问题描述

我有一个带有标题的页面，然后是左侧的侧栏和右侧的主要内容区域。我希望右侧的主要内容区域可以独立于左侧的侧栏滚动。

  ----- ------------------------------ 
 |标题| 
 | --------------------------------- | 
 | | | 
 | | | 
 |离开|主| | 
 |边栏|内容| 
 | | | 
 | | | 
 ----------------------------------- 
  

我知道我可以使用 {height：500px;溢出-y：auto; } ，但然后我设置的高度不会总是匹配窗口的剩余高度。

有什么办法可以实现这一点吗？我的主要内容是否会像通常那样使用所有可用的窗口空间？

解决方案

您可以使用绝对定位，参见there： http://jsfiddle.net/KpJgd/

  #content {
 position：absolute; 
 top：200px; 
 right：0; 
 bottom：0; / *这是把< div>直到窗口的底部* / 
 width：70％; 
溢出：auto; 
背景颜色：＃008800; 
} 
  

请注意，您必须在CSS中指定：

  html，body {
 width：100％; 
身高：100％; 
 overflow：hidden; 
} 
  

I have a page with a header followed by a side bar on the left and a main content area on the right. I would like the main content area on the right to scroll independently from the side bar on the left.

-----------------------------------
| Header                          |
|---------------------------------|
|         |                       |
|         |                       |
| Left    | Main                  |
| Sidebar | Content               |
|         |                       |
|         |                       |
-----------------------------------

I know that I can style the main content with { height: 500px; overflow-y: auto; }, but then the height I set won't always match the remaining height of the window.

Is there any way to accomplish this and have my main content use up all the available window space as it normally would?

解决方案

You can make it with absolute positionning, see there : http://jsfiddle.net/KpJgd/

#content{
    position:absolute;
    top:200px;
    right:0;
    bottom:0; /*this is the trick where the <div> goes til the bottom of the window*/
    width:70%;    
    overflow:auto;
    background-color:#008800;        
}

Note you have to specify in your CSS :

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}

这篇关于创建可滚动元素并将大小设置为匹配窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！