在另一个元素进行变换后，如何使div占100％

Question

这是一个jsfiddle：https://jsfiddle.net/ohgbce6v/

from math import sin, cos, sqrt, atan2, radians

# approximate radius of earth in km
R = 6373.0

lat1 = radians(40.7619087)
lon1 = radians(-73.9690218)
lat2 = radians(40.760178)
lon2 = radians(-74.0037083)

dlon = lon2 - lon1
dlat = lat2 - lat1

a = sin(dlat / 2)**2 + cos(lat1) * cos(lat2) * sin(dlon / 2)**2
c = 2 * atan2(sqrt(a), sqrt(1 - a))

distance = R * c

print("Result:", distance)
print("Should be:", distance, "mi")

当您单击黑色小块时，它将关闭菜单，粉红色的斑点将占据其余空间。

这是关闭后的样子：

在灰色区域转换后，如何使粉红色斑点占据其余空间？

Answer 1

请勿为此使用transform。相反，您可以使用margin-right: -415px;之类的东西来实现所需的功能。

当您使用transform时，元素被转换了，但仍然在DOM中占据了空间，就好像它没有被转换一样……将其视为元素的幻影副本。

所以更新此：

.game-container .right-container.closed {
      margin-right: -415px 
}

Update fiddle

可以阅读有关翻译here的更多信息。

  

请务必注意，使用transform的元素不会导致   其他元素围绕它流动。