Question

我正在使用此代码，该代码在Firefox中可以正常工作，但在Chrome，Edge，IE11中却不能。该问题似乎与display:table-row有关。带红色按钮的黄色侧栏应保持与绿色区域相同的高度。在FireFox中是这样，但在其他地方却不是。

反正我可以更改它以使其得到更多支持吗？

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  display:table;
}

#titleContainer{
  display:table-row;
  background-color: blue;
}

#contentContainer{
  display:table-row;
  background-color: red;
  height: 100%;
  position:relative;
}

#sidebar{
  position: absolute;
  left: 6px;
  overflow: hidden;
  width: 40px;
  margin: 0;
  padding: 0;
  top: 6px;
  bottom: 6px;
  background-color: yellow;
  z-index:1000;
}

#sidebar > ul {
  list-style-type:none;
  width:40px;
  margin:0;
  padding:0;
  position:absolute;
}

#sidebar > ul + ul {
  bottom:0;
}

#sidebar > ul > li {
  width:100%;
  overflow:hidden;
  height:40px;
  background-color: red;
}

#page{
  background-color: green;
  height:100%;
  width:100%;
  position:absolute;
}

<div id="titleContainer">
  <center>
  <h2>
  TITLE
  </h2>
  </center>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
  <li>TOP</li>
</ul>
<ul>
  <li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>

Answer 1

好吧，所以我实现了与示例相同的功能，但是通过删除display:table并改为使用display:flex来支持其他浏览器。我的主要问题实际上是（我应该更好地向自己解释，我必须执行）：

我必须有两个div，一个div，另一个div，它们应该将整个页面高度和动态高度合并在一起
我无法触摸.sidebar CSS，因为它是一个外部项目，我最好不要更改。

因此，由于@MrLister和@Pete的及时反馈（我删除了@Pete建议的过时的<center>标记），我的最终代码是这个代码：

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  padding:0;
  margin:0;
  display: flex;
  flex-flow: column;
}

#titleContainer{
  background-color: blue;
  text-align: center;
}

#contentContainer{
  background-color: red;
  height: 100%;
  position:relative;
}

#sidebar{
  position: absolute;
  left: 6px;
  overflow: hidden;
  width: 40px;
  margin: 0;
  padding: 0;
  top: 6px;
  bottom: 6px;
  background-color: yellow;
  z-index:1000;
}

#sidebar > ul {
  list-style-type:none;
  width:40px;
  margin:0;
  padding:0;
  position:absolute;
}

#sidebar > ul + ul {
  bottom:0;
}

#sidebar > ul > li {
  width:100%;
  overflow:hidden;
  height:40px;
  background-color: red;
}

#page{
  background-color: green;
  height:100%;
  width:100%;
  position:absolute;
}

<div id="titleContainer">
  <h2>
  TITLE
  </h2>
</div>
<div id="contentContainer">
<div id="sidebar">
<ul>
  <li>TOP</li>
</ul>
<ul>
  <li>BOTTOM</li>
</ul>
</div>
<div id="page"></div>
</div>

display：table-row在除FireFox之外的浏览器中不起作用

1 个答案: