css - 卡片背面需要填满整个屏幕

Question

我在 jsfiddle ( http://jsfiddle.net/GDdtS/3610/ ) 上找到了一个 3d 卡片翻转，并将其编辑为：http: //jsfiddle.net/qCPrj/

我试图让“卡片”的背面填满网页的整个屏幕。有人建议添加代码：

positition: absolute;
left: 0;
right: 0;

到后面的类，但这不会改变背面的宽度。我的问题是，如何让“卡片”的背面填满整个屏幕？

编辑*

正面尺寸需要保持 400 像素宽和 200 像素高，但我希望背面是全屏的，所以当您将鼠标悬停在背面时，背面会出现并扩展以覆盖整个屏幕。

score 0 · Accepted Answer

你班级的宽度和高度只有 400X200，所以从技术上讲，它是最大的……它会填满那部分。你需要增加“.flip”的大小

score 0 · Accepted Answer

您必须将所有父元素的高度设置为 100% 以相应地填充空间 - 所以在您的情况下添加

html, body, .flip, .card, .front, .back{height:100%}

2 回答 2