html - Flexbox 页脚错误地收缩

Question

我正在使用 flexbox 来划分网页上的空间。我有一个带有 SVG 和粘性页脚的主要区域。页脚有一个按钮，可在鼠标进入和离开时更改其文本。问题是发生这种情况时页脚会暂时向下滑动。

参见此处:http://jsfiddle.net/nicmcd/zb149q0k/49/

通过调试我发现导致这种情况的令人讨厌的 CSS 样式是 SVG 区域设置为 100% 的高度:

svg {
    width: 100%;
    height: 100%;  /* this is the offensive style */
    top: 0;
    left: 0;
}

我的困境是我需要将 SVG 设置为 100% 的高度，因为我希望它占用页脚未占用的所有空间。

一件奇怪的事情是，在页脚滑开后，如果调整窗口大小，它又会回来。

请帮忙!

Answer 1

取而代之的是:

#content #drawing {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    background-color: red;
}

svg {
    width: 100%;
    height: 100%; /* this is the offensive style */
    top: 0;
    left: 0;
}

试试这个:

#content #drawing {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    background-color: red;
    display: flex; /* new */
}

svg {
    width: 100%;
    /* height: 100%; removed offensive style :-) */
    top: 0;
    left: 0;
}

revised jsfiddle

当你将一个元素设置为 display: flex(使其成为一个 flex 容器)时自动激活 align-items: stretch ，它告诉子元素(又名“flex 元素”；在本例中为 svg 元素)沿着 cross-axis 扩展容器的全长(在这种情况下，高度)。

因此不需要百分比高度、固定高度或calc() 函数。借助 flex 属性，可以引导 svg 占用可用空间，消除对页脚的任何干扰。