Question

我尝试使用CSS＆＃34; div＆＃34;创建标准的头部，身体，页脚样式display: flex; flex-direction: column;。在可调整大小的div内。

＆＃13;

div {
  font: 12px sans-serif;
  border-color: #999999;
  border-style: solid;
  border-width: 1px;
}

.outer div {
  padding: 5px;
}

#cell1 {
  top: 25px;
  left: 25px;
  width: 180px;
  resize:both;
  overflow: auto;
}

#cell2 {
  top: 50px;
  left: 250px;
  width: 180px;
  resize:both ;
  overflow: auto;
}

.outer {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.header {
  background: #cccccc;
}

.body {
  flex: 1;
}

.footer {
  background: #cccccc;
}

</style>

＆＃13;

<meta name="description" content="resizable flex">

<html>

<body>

<div id="cell1" class="outer" onresize="console.log('resized)">
  <div class="header">Header</div>
  <div class="body">... content here<br>... line 2<br>... line 3</div>
  <div class="footer">Footer</div>
</div>

<div id="cell2" class="outer">
  <div class="header">Header</div>
  <div class="footer">Footer</div>
  <div>
content here<br>... line 2<br>... line 3</div>
</div>

</body>
</html>

＆＃13;

我已经很好地使用了Firefox，但是对于Safari和Chrome，左手div无法调整大小。似乎它是正确的div正在阻止这个（指定展开的那个）作为右侧框，而没有在Safari和Chrome上调整大小。

这是浏览器不兼容，还是HTML / CSS错误？

Answer 1

我希望更多地了解您的意图，以确保我创造了正确的结果。

如果我理解正确，需要为其他一些元素添加一些CSS，大多数是.footer中的#cell1。这是什么样的：

#cell1 {
  top: 25px;
  left: 25px;
  width: 200px;
  resize:both;
  overflow: auto;
}

#cell1 .footer{
  resize:both;
  overflow: auto;
}

当然是一个演示： http://codepen.io/anon/pen/qNxRPm

如果您需要不同类型的结果，则必须告诉我有关您的用例或意图的更多信息。

结合flex显示和可调整大小的div浏览器不兼容

1 个答案: