下面的滚动div的固定标题div

我试图将两个div放在另一个的上面。最高的一个有固定的大小。最底层的页面需要填充页面高度的其余部分，如果页面内容太大，则不会使页面更高。下面的滚动div的固定标题div

<div id="content"> 
    <div id="top-padding"></div> 
    <div id="stuff"> 
     some content 
     <br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <br><br><br><br><br><br><br><br> 
     End of content. 
    </div> 
</div><!-- content -->

我尝试到目前为止是：http://jsfiddle.net/b4fEE/

我的问题是，绿色DIV太大。我需要的方式来指定它的高度

100% - 30px

我宁愿做在纯CSS，但如果有必要，我会诉诸使用Javascript/jQuery的。

来源

2013-03-08 SteveP

@SteveP：#stuff { overflow- X：自动; background-color：lightgreen; } – ankurtr 2013-03-08 12:49:35

尝试'身高：calc（100％-30px）;'带有供应商前缀 – 2013-03-08 12:49:48

@SteveP：试试我的解决方案。有用。 :-) – ankurtr 2013-03-08 12:51:03

试试这个：

#stuff { 
    overflow-x:auto; 
    background-color: lightgreen; 
    top:30px; /* as the height of the other div is 30px */ 
    left:0; 
    right:0; 
    bottom:0; 
    position:absolute; 
}

Working Fiddle

来源

2013-03-08 12:34:50

标签只是一种使内容大于可用空间的方式来强制滚动条出现。 – SteveP 2013-03-08 12:50:53

感谢您的css建议。它对我来说非常合适，谢谢。 – SteveP 2013-03-08 12:51:30

@SteveP欢迎您。 :) – 2013-03-08 12:52:22

在如果有人想解决在正常流动此一致的东西的情况下，如今这可以通过使用flexbox布局模型来完成，如下图所示：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
#content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    background-color: #C9E6FF; 
 
} 
 
#top-padding { 
 
    height: 30px; 
 
    flex: none; 
 
    background: blue; 
 
} 
 
#stuff { 
 
    flex: auto; 
 
    overflow-y: auto; 
 
    background-color: lightgreen; 
 
} 
 
/*for demo purpose */ 
 

 
#stuff p { 
 
    height: 1000px; 
 
}

<div id="content"> 
 
    <div id="top-padding"></div> 
 
    <div id="stuff"> 
 
    <p>some content</p> 
 
    </div> 
 
</div>

来源

2016-04-19 12:25:54

而且在如果有人想解决这个事情保持在正常流量和不使用Flex话，那么解决方法如下：

html, 
 
    body { 
 
     height: 100%; 
 
    } 
 

 
    body { 
 
     margin: 0; 
 
    } 
 

 
    #content { 
 
     height: 100vh; 
 
     position: relative; 
 
     background-color: #C9E6FF; 
 
     margin: 0 auto; 
 
     width: 300px; 
 
    } 
 

 
    #top-padding { 
 
     background: blue; 
 
     height: 30px; 
 
    } 
 

 
    #stuff { 
 
     overflow-x:auto; 
 
     background-color: lightgreen; 
 
     height: calc(100vh - 30px); 
 
    }

<div id="content"> 
 
    <div id="top-padding"></div> 
 
     <div id="stuff"> 
 
      <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p> 
 
     </div> 
 
    </div>

来源

2016-04-19 12:44:17

下面的滚动div的固定标题div

回答

相关问题