如何根据外部div的大小调整内部div的大小?

时间:2013-12-11 09:45:35

标签: jquery html

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/

4 个答案:

答案 0 :(得分:2)

  

我认为这可能就是你所需要的。

     

HTML:

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

  
  

CSS:

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

SCRIPT:

     

jsfiddle链接:http://jsfiddle.net/gHLgt/6/

答案 1 :(得分:0)

如果您不希望调整宽度,则需要在inner1inner2上设置宽度。

答案 2 :(得分:0)

试试这个:

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

答案 3 :(得分:0)

请你这样试试,在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;
        }