如何根據外部div的大小調整內部div的大小？

Question

HTML：

<div class="outer">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

---

CSS：

 .outer { position: absolute; float: left; min-height: 120px; min-width: 180px; height: 160px; width: 200px; } .inner1{ cursor: pointer; min-height: 25px; } .inner2 { width: 100%; height: 85%; min-height: 120px; min-width: 180px; resize: none; margin: 0px; } 

---

當我重新調整外部大小時， inner2會自動重新調整大小，只能重新調整大小。而inner1作為固定高度和寬度。它就像標題。 我不想明確地重新調整inner2的大小。 inner2應根據外部div重新調整大小可以有人幫助我。 檢查dis http://jsfiddle.net/gHLgt/1/

Answer 1

我想這可能就是你所需要的。

HTML：

 &ltdiv class="main"> &ltdiv class="header"></div> &ltdiv class="innerMain"> &ltdiv class="content"></div> </div> </div>   

CSS：

  .innerMain {\n     最小高度：120px;\n     最小寬度：180px;\n     身高：160px;\n     寬度：200px;\n     邊框：1px純紅色;\n     填充：3px; \n   }\n   .header {\n     最小高度：120px;\n     最小寬度：180px;\n     游標：指針;\n     最小高度：25px;\n     邊框：1px純綠色;\n     顯示：塊; \n   } \n   .content {\n     身高：100％;\n     調整大小：無;\n     外形：3px純黃色;\n   }\n   。主要{\n     寬度：自動;\n     display：inline-block;\n     邊框：1px純黑色; \n   }\n

腳本：

\n $(".innerMain").resizable(); 

jsfiddle鏈接： http ： //jsfiddle.net/gHLgt/6/

Answer 2

如果您不希望調整它們的大小，則需要在inner1和inner2上設置寬度。

Answer 3

嘗試這個：

 .inner2
    {
    width: 100%;
    height: auto;
    height:100%;
    resize: none;
    margin: -25px 0 0 0px;
    border:3px solid yellow;
    }

Answer 4

你可以試試這樣，在css上做了一些改變，

   .outer
        {
            position: absolute;
            float: left;
            min-height: 120px;
            min-width: 180px;
            height: 160px;
            width: 200px;
            border: 2px solid #000;
        }

        .inner1
        {
            cursor: pointer;
            min-height: 20px;
            height: 20%;
            background-color: #FF0000;
        }

        .inner2
        {
            height: 80%;
            min-height: 100px;
            min-width: 180px;
            resize: none;
            margin: 0px;
            background-color: #01DF01;
        }