相关疑难解决方法(0)

我想要一个具有特定高度的垂直菜单.

每个孩子必须填写父母的高度并且具有中间对齐的文本.

孩子的数量是随机的,所以我必须使用动态值.

Div .container包含一个随机数的children(.item),它们总是必须填充父级的高度.为了实现这一点,我使用了flexbox.

为了使文本链接与中间对齐,我正在使用display: table-cell技术.但使用桌面显示需要使用100%的高度.

我的问题是.item-inner { height: 100% }在webkit(Chrome)中无效.

1. 这个问题有解决方法吗？
2. 或者是否有一种不同的技术可以使所有.item填充父级的高度与文本垂直对齐到中间？

这里的示例jsFiddle,应该在Firefox和Chrome中查看

.container {
  height: 20em;
  display: flex;
  flex-direction: column;
  border: 5px solid black
}
.item {
  flex: 1;
  border-bottom: 1px solid white;
}
.item-inner {
  height: 100%;
  width: 100%;
  display: table;
}
a {
  background: orange;
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div>

  <div class="item">
    <div class="item-inner">
      <a>Button</a>
    </div>
  </div> …

我想要一个任意数字的div列,每个div的宽度为100%,高度为父div的100%,因此最初可以看到一个,而其他的则向下溢出父级.我设置的div有flex: 0 0 100%;,与父DIV中display: flex和flex-direction: column实现这一目标.

父div本身具有未知高度,因此它也是a的子项,display: flex并flex-direction: column设置为flex: 1 0 0在其容器中占用剩余空间.

在Firefox中输出是我想要的:

但是,不在Chrome中:

如何在没有Javascript的情况下在Chrome中实现Firefox风格？

您可以在http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview以及相应的版本中查看此操作,该版本flex-direction: row在Firefox和Chrome中均可使用.

供参考,完整的CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 200px;
  border: 4px solid green;
  margin-bottom: 20px;
}

.column-parent {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.column-child {
  flex: 0 0 100%;
  border: 2px solid red;
}

和HTML

<div class="wrapper"> …

我发现如果我们设置一个块级别元素,有height:auto或height: 0~100%没有设置父级的高度具有显式值,并且其块级别子级具有底部边距,那么它将在Chrome中以不同方式计算高度,但在Firefox中则不同.对于设置的情况height: 1%:

http://codepen.io/anon/pen/BjgKMR

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: 1%;
}

inner {
  margin-bottom: 30px;
  margin-top: 20px;
}

<div>
  <p class="inner">block level element</p>
</div>

div块的高度将计算为margin-bottom + content height of p element.我很困惑为什么height: 1%应该计算,auto因为父元素(html和body标签)没有明确设置其高度,但具有不同的高度,因为我们只是直接设置高度auto？

如果我们直接将其设置为height: auto,则显然只需将高度设置为子块级元素的高度,该高度不包括其下边距.

html {
  background: pink;
}

body {
  background: yellow;
}

div {
  height: auto;
}

inner …

我想要一个弹性项目占据剩余高度的100%并显示overflow: scroll条形.

看起来问题来自于我#userList占用了100%的窗口高度而不占用剩余空间.

body {
  display: flex; 
  flex-direction: column; 
  min-height: 100%; 
  margin:0px;
}
.wrapper {
  display: block; 
  flex: 1 1 auto; 
  display: flex;
  flex-direction: row; /
}

#chatContainer {
	background: orange;
	width: calc(100% - 350px);
	display: flex;
	flex-direction: column;
}
#tabs{
	background-color: red;
	flex: 1 1 0px;
	display: flex;	
}
#usersContainer {
  flex: 1 1 0; 
  display:flex;
  flex-direction:column;
}
#userListWrapper {
	background-color:pink;
	flex: 1 1 auto;
	display:flex;
}
#userList {
    -webkit-flex: 1 1 auto;
    overflow: auto; …

在Google Chrome中,我如何强制嵌套在flexbox成员中的元素(通过"flexbox的成员",我的意思是使用样式元素的子元素display:flex)将其大小限制为嵌套在其下的flexbox成员的大小？例如,假设我有以下内容:

<div style="display:flex; flex-direction:column; height:100vh;">
  <div style="height:60px;">Static header</div>
  <div style="flex: 1 1 0; overflow:hidden;">
     <div style="overflow:auto; height:100%;" id="problem-is-here">
       Lots and lots of content, way too much to fit in the viewport
     </div>
  </div>
</div>

因为div最外层的第一个孩子div具有恒定的高度,所以它最终高度为60px,并且因为第二个孩子的diva flex-grow为1,所以它获得剩余的可用空间(在这种情况下,100%的视口减去60px) .我可以确认,根据Inspect Element,这个元素的尺寸足够大,可以占据视口空间的其余部分.

在Firefox和IE11中,由于height:100%,最内层的element(id="problem-is-here")采用为其父级计算的高度.因此,由于它太小而无法显示其内容并被overflow设置为auto,因此它(而不是整个body)获得垂直滚动条.这就是我要的.

但是,在Chrome中,最内层元素的渲染高度足以包含其所有内容,这些内容的高度大于其父级.因此,由于其父级具有overflow:hidden,因此不会出现滚动条,并且无法访问多余的内容.当父高度由flexbox而不是CSS height属性确定时,如何告诉Chrome渲染此最内层元素的高度最多等于其父级的高度？请注意,我不能给内部div或其父级一个确定的height值,因为在我正在处理的应用程序中,其他flexbox成员的数量可能会有所不同.

注意:我已经尝试了其他答案中的一些建议,例如设置所有元素min-height:0而不是auto,或者确保flex-basis设置为0,但这些都没有奏效.看到

http://plnkr.co/edit/UBRcrNmR5iDbn3EXu6FI?p=preview

举例说明问题.(div …

为了更好地查看问题，请在 Firefox 和 chrome 上的 html 代码下运行并查看差异。

该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将 display 设置为flex和flex-directionto column，并将其中一个 flex 项设置flex-grow为 1 时。此 flex 项的内容不能将高度设置为 100%。

你能帮我在不使用 JavaScript 或 css Calc 函数的情况下解决问题吗？因为在实际项目中，事情远比这复杂得多。

h1 {
  margin: 0;
  padding: 0;
  color: white;
}

div {
  font-size: 38px;
  color: white;
}

<body style="margin: 0; padding: 0;">
  <div style="height: 100vh; background: royalblue;">
    <div style="display: flex; flex-direction: column; height: 100%;">
      <div style="background: rosybrown; flex-grow: 0;">
        This is first flex item
      </div>
      <div style="flex-grow: 1; background-color: …