动态高度可滚动div

理想情况下只使用CSS我想要一个高度动态的可滚动div。动态高度可滚动div

布局的样机...

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     .page { 
      margin: 0; 
      padding: 0; 
      width: 100%; 
      height: 100%; 
     } 
     .top{ 
      height: 100px; background-color: Gray; 
     } 
     .middle { 
      height: 150px; background-color: Green; 
     } 
     .bottom { 
      overflow: auto; 
     } 
    </style> 
</head> 
<body> 
<div class="page"> 
    <div class="top"> 
     top 
    </div> 
    <div class="middle"> 
     second 
    </div> 
    <div class="bottom"> 
     This one I want to be dynamic in height (stretch from here to the bottom of the window). <br /> 
     And scroll if the content if its bigger than the height allowed in the window. 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
     <p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p><p>a line</p> 
    </div> 
</div> 
</body> 
</html>

.bottom是我想伸展到浏览器底部的DIV ...然后滚动，如果需要的话。

--UPDATE：掀起了这一点的JavaScript，做了一个不错的工作......但想纯粹的CSS解决方案真的吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"   type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     SetScrollableDivHeight($(".bottom")); 
    }); 
    $(window).resize(function() { 
     SetScrollableDivHeight($(".bottom")); 
    }); 
    function SetScrollableDivHeight(div) { 
     var top = div.position().top; 
     var windowH = $(document).height(); 
     var remaining = windowH - top; 

     div.height(remaining - 25); 
    } 
</script>

来源

2011-02-27 SteveCl

*“所以我有类似的东西”*嗯，告诉我们你真的*有什么？真正的标记和CSS，最好用[JS小提琴演示]（http://jsfiddle.net/）来说明。你也想'从这里开始调整到窗口的底部'？很好，但是你需要定义'here'**是什么或者什么地方。** – 2011-02-27 16:36:07

公平点David，尽管我从未见过或者用过JS小提琴。我没有发布整个网页的原因是它并不真正成为我置身于公众视野的地方。我的内容非常简单...基本上是在n高度的顶部，然后是我想要的div（如果使用css的位置）动态调整大小到窗口的底部并在需要时滚动。如果窗口的大小被调整了，那么div或者不滚动，但仍然延伸到窗口的底部。 – SteveCl 2011-02-27 17:14:49

创建演示页面以显示您...希望这可以让它更清晰？ – SteveCl 2011-02-27 17:36:55

只需将您想要的大小设置为您的div，然后您必须添加overflow: auto css样式。

例如，scrollable类添加到您的div并添加以下的风格你的CSS：

.scrollable { 
    overflow: auto; 
}

只要你div的内容是太大了你它的大小，滚动条就会出现。您可以强制滚动条的外观与他人价值比汽车，请参阅：http://www.w3schools.com/css/pr_pos_overflow.asp

来源

2011-02-27 16:51:04 krtek

是的好 - 但我不想设置div的高度。我希望它动态调整大小到窗口底部。如果内容太长，滚动条会出现，如果他们调整浏览器窗口的大小，我的div将伸展到底部，并再次决定是否需要滚动条。 – SteveCl 2011-02-27 17:11:24

没有你的页面结构，你不可能给你一个解决方案来调整div窗口的高度。但也许这个stackoverflow答案可以帮助你：http://stackoverflow.com/questions/1181597/div-100-of-window-height – krtek 2011-02-27 17:25:14

演示页面创建...和后编辑... – SteveCl 2011-02-27 17:36:35

每上面的代码：

.page { ... height:100%;... } 
.bottom { height:100%; overflow:auto; }

只要它的父有一个height属性.bottom只会扩大到其父的高度。这也适用于.page。

来源

2011-02-27 21:36:01 Dawson

动态高度可滚动div

回答

相关问题