Javascript - 在窗口大小调整时垂直调整两个div

时间:2017-12-06 05:50:38

标签: javascript

有两个垂直高度不等的div。每个div的最小高度可以是var dataResponse = JSON.parse(response); for (var i = 0; i < dataResponse.Table.length; i++) { if (dataResponse.Table[i] != "" || dataResponse.Table[i] != null) { $("#spnLinkId").text(dataResponse.Table[i].LINK_ID); $("#spnSpanLength").text(dataResponse.Table[i].NE_SPAN_LENGTH); $("#txtFiberActlength").val(dataResponse.Table[i].HOTO_ACTUAL_LENGTH); $("#txtLITActlength").val(dataResponse.Table[i].LIT_ACTUAL_LENGTH); } if (dataResponse.Table[i].ISABDMISSING != "" || dataResponse.Table[i].ISABDMISSING != null) { if (dataResponse.Table[i].ISABDMISSING == 1) { $("#FEmissingAsBuiltYes").prop("checked", true); } else { $("#FEmissingAsBuiltNo").prop("checked", true); } } }

当我调整浏览器窗口的大小时,我希望div调整大小以保持宽高比。

I have created a demo in JSBIN。它可以工作,但它会进入40px

Maximum call stack

他们有更好的方法来做这个或优化功能吗?

1 个答案:

答案 0 :(得分:0)

不需要Javascript;现代浏览器让你满意。只需将sequence[j]属性添加到flex s'CSS即可。此示例为div提供65/35分割。

div
#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#top {
  flex: 65 0 0%;
  min-height: 40px;
  width: 200px;
  background: red;
}

#bottom {
  flex: 35 0 0%;
  min-height: 40px;
  width: 200px;
  background: orange;
}