How to resize a inner divs according to resize of outer 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 get re-size automatically when i re-size outer which can be re-size only.and inner1 as fixed height and width.it is like header. i do not want to re-size inner2 explicitly. inner2 should re-size according to outer div Can somebody help me. check dis http://jsfiddle.net/gHLgt/1/

Answer 1

I think this may be what you need.

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

 .innerMain { \n    min-height: 120px; \n    min-width: 180px; \n    height: 160px; \n    width: 200px; \n    border:1px solid red; \n    padding: 3px;  \n  } \n  .header{ \n    min-height: 120px; \n    min-width: 180px; \n    cursor: pointer; \n    min-height: 25px; \n    border:1px solid green; \n    display: block;  \n  }  \n  .content { \n    height: 100%; \n    resize: none; \n    outline: 3px solid yellow; \n  } \n  .main{ \n    width: auto; \n    display: inline-block; \n    border:1px solid black;  \n  } \n

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

jsfiddle link : http://jsfiddle.net/gHLgt/6/

Answer 2

如果您不希望调整它们的大小，则需要在inner1和inner2上设置宽度。

Answer 3

try this:

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

Answer 4

Can you please try like this, made some changes in the 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;
        }