使用包含的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（類似於縮放/放大），那可能會更復雜。