[英]How to resize a inner divs according to resize of outer div?
HTML: HTML:
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
.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. 当我重新调整外部大小时,
inner2
会自动重新调整大小,只能重新调整大小。而inner1作为固定高度和宽度。它就像标题。 i do not want to re-size inner2
explicitly. 我不想明确地重新调整
inner2
的大小。 inner2 should re-size according to outer div Can somebody help me. inner2应根据外部div重新调整大小可以有人帮助我。 check dis http://jsfiddle.net/gHLgt/1/
检查dis http://jsfiddle.net/gHLgt/1/
I think this may be what you need.
我想这可能就是你所需要的。
HTML:
HTML:
<div class="main"> <div class="header"></div> <div class="innerMain"> <div class="content"></div> </div> </div>
CSS:
CSS:
.innerMain {.innerMain {\n min-height: 120px;
最小高度:120px;\n min-width: 180px;
最小宽度:180px;\n height: 160px;
身高:160px;\n width: 200px;
宽度:200px;\n border:1px solid red;
边框:1px纯红色;\n padding: 3px;
填充:3px; \n }
}\n .header{
.header {\n min-height: 120px;
最小高度:120px;\n min-width: 180px;
最小宽度:180px;\n cursor: pointer;
游标:指针;\n min-height: 25px;
最小高度:25px;\n border:1px solid green;
边框:1px纯绿色;\n display: block;
显示:块; \n }
} \n .content {
.content {\n height: 100%;
身高:100%;\n resize: none;
调整大小:无;\n outline: 3px solid yellow;
外形:3px纯黄色;\n }
}\n .main{
。主要{\n width: auto;
宽度:自动;\n display: inline-block;
display:inline-block;\n border:1px solid black;
边框:1px纯黑色; \n }
}\n
SCRIPT:
脚本:
\n$(".innerMain").resizable();
jsfiddle link : http://jsfiddle.net/gHLgt/6/
jsfiddle链接: http : //jsfiddle.net/gHLgt/6/
如果您不希望调整它们的大小,则需要在inner1
和inner2
上设置宽度。
try this: 尝试这个:
.inner2
{
width: 100%;
height: auto;
height:100%;
resize: none;
margin: -25px 0 0 0px;
border:3px solid yellow;
}
Can you please try like this, made some changes in the css, 你可以试试这样,在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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.