使用包含的div高度来缩放容器div

Question

我想要在容器div内部的div变高时获取驻留在容器div中的div来缩放容器div高度。当容器内的div高度比容器本身高时，它只是移过容器的底部。我想让容器按照包含的div进行缩放。我如何在CSS中做到这一点？

Answer 1

你只需要通过百分比，如给予高度属性：

percent { display:block:height:100%; } as your div stands in html: 

<div class="percent"></div> 

Answer 2

格雷厄姆。你所描述的是DIV的缺省行为，或者是这个问题的任何块元素。例如以下HTML：

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

    #inner { 
     background-color: red; 
    } 
</style> 
<div id="container"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
</div> 

你会得到以下渲染HTML：

Basic Div http://c0180871.cdn.cloudfiles.rackspacecloud.com/normal.png

你描述当div容器不会扩展到包含内部DIV的情况，当你有发生浮动内部股利。根据定义，浮动将块元素从其包含元素的约束中分离出来。应用“float：left;”您#inner元件给出以下：

alt text http://c0180871.cdn.cloudfiles.rackspacecloud.com/floated.png

的解决方案是在内含div在清零浮动元件的底部添加一个块级元素。这会导致包含div包围这个新的块级元素，因此也包含您的浮动元素。

例如

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

    #inner { 
     background-color: red; 
     float: left; 
    } 
</style> 
<div id="container"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

这将使输出与第一张图像相同。

显然，这可以添加到您的div容器底部的繁琐的事情，如果你做了很多浮动的。

使用CSS2你可以用一个简单的类定义（和当然的IE浏览器黑客）做到这一点：

<style type="text/css"> 
    dl { margin: 0; padding: 0;} 

    #container { 
     background-color: blue; 
     padding: 5px 5px 5px 5px; 
    } 

    .clearfix:after { 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
    } 

    * html .clearfix {height: 1%;} 

    #inner { 
     background-color: red; 
     float: left; 
    } 
</style> 
<div id="container" class="clearfix"> 
    <div id="inner"> 
     <dl> 
      <dt>Stuff</dt> 
      <dd>Blah blah blah</dd> 
      <dt>Foobar</dt> 
      <dd>Bazquux</dd> 
     </dl> 
    </div> 
</div> 

的clearfix类简单地添加到任何包含浮动元素的div容器。请注意，“* html”是IE所要求的破解。

Answer 3

只需添加

overflow: auto; 

到外层div。

Answer 4

如果你的意思是“规模化”为只是单纯的扩大，也许我看了你的描述为具有，比如说，500像素的高度div容器，如果他们长得过大所包含的div将推动这个更多。在这种情况下，也许你可以使用最小高度？

min-height: 500px; 

如果表示“标度”作为在容器的div是500x500px，所包含的占用的200像素的初始高度展开至400像素与更多的内容，其推动容器div来1000x1000px（类似于缩放/放大），那可能会更复杂。