Html 100%宽度和宽度；Webkit浏览器flexbox内部的高度锚定_Html_Css_Webkit_Flexbox

Html 100%宽度和宽度；Webkit浏览器flexbox内部的高度锚定

html css

Html 100%宽度和宽度；Webkit浏览器flexbox内部的高度锚定,html,css,webkit,flexbox,Html,Css,Webkit,Flexbox,我需要在flexbox内部创建一个100%宽度和高度的链接。这确实在Firefox、IE11中成功呈现，但不像Chrome这样的webkit浏览器。webkit会扩展宽度，但不会扩展到100%高度。在这种情况下，它只是一行文本的高度。Firefox和IE11确实将锚定扩展到列表项的整个高度以下是CSS： .height-100vh { height: 100vh; } ul.flex-column { padding: 0; margin: 0; } ul

我需要在flexbox内部创建一个100%宽度和高度的链接。这确实在Firefox、IE11中成功呈现，但不像Chrome这样的webkit浏览器。webkit会扩展宽度，但不会扩展到100%高度。在这种情况下，它只是一行文本的高度。Firefox和IE11确实将锚定扩展到列表项的整个高度

以下是CSS：

.height-100vh  {
     height: 100vh;
}

ul.flex-column  {
     padding: 0;
     margin: 0;
}

ul.flex-column li  {
     list-style: none;
}

.flex-column  {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-flow: column wrap;
     -ms-flex-flow: column wrap;
     flex-flow: column wrap;
}

.flex-cell  {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     -moz-box-flex: 1;
     -ms-flex: 1;
     flex: 1;
}

.flex-full  {
     width: 100%;
     height: 100%;
}

.full-anchor {
    display:block;
    width: 100%;
    height: 100%;
    background: #000;
    color: #FFF;
}

以及HTML：

<body class="height-100vh">

    <ul class="flex-column flex-full">
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
        <li class="flex-cell"><a href="#" class="full-anchor">hello</a></li>
    </ul>

</body>

是否有我不使用的前缀？我正在使用autoprefixr。还要注意的是：我使用的是normalize.css。

更新后的flexbox标准仍然是新的（Chrome 29在2013年年中开始支持它，没有前缀），因此可能Webkit以一种稍微不同的方式解释了该规范，或者可能还有一些bug需要解决

将可见边框添加到

.flex单元格

CSS可确认

li

元素正在扩展，而不是

元素：

为了简单起见，我删除了-前缀，但您需要为Safari 8使用-webkit：

在玩这个游戏的时候，我无意中发现了它，虽然它与列表或主播无关，但似乎大卫·斯托雷的想法也适用于这里。基本上，由于您的

li

零件在任何地方都不指定100%的情况下进行扩展，因此解决方案是将每个

li

也放入一个弹性框中，并给锚定一个弹性值1：

.flex-cell  {
    display: flex;
    flex: 1;
}

.full-anchor {
    flex: 1;
    background: rgba(0,0,0,0.25);
    color: #FFF;
}