Question

此CSS代码位于default AMP style sheet：

html, body {
  height: auto !important;
}

如果您想使用flexbox确保HTML文档的正文占据整个屏幕，即使没有足够的内容占据整个屏幕，也会出现问题。为此，您需要将html, body的高度设置为100%。

Here is an example使用flexbox确保您的页脚位于底部，即使页面上的内容不足。

任何方法可以实现此目的并仍然与Google AMP兼容吗？

Answer 1

我不知道如何解决您的flexbox问题，但是，我来到此页面寻找一种获得100％背景的方法，并设法弄清楚了如何将html元素提高到100％页面高度。但是，由于放大器在body元素上设置了position: relative!important;，因此无法使用相同的技巧来设置body的高度。所以-最后，不，我没有解决您的问题的方法。但是也许是一个开端，或者可能会帮助其他人解决背景问题。

<html class='max'></html>

.max {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}

html {
  background: #c5975b no-repeat url("<img-URL>");
  background-size: auto 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

Answer 2

您可以通过将min-width：100％设置为body和html来实现。

Answer 3

您可以使用[Fact] public void MyTest() { var fixture = new Fixture().Customize(new AutoMoqCustomization { ConfigureMembers = true, }); fixture.Inject<MyObject>(null)); var myService = fixture.Create<Mock<IMyService>>(); var myObject = myService.Object.GetMyObject(); Assert.Null(myObject); }

min-height: 100vh;

完整示例代码：https://amp-cover-image.glitch.me/

Answer 4

发布的问题没有明确的解决方案。使用以下示例无法覆盖高度自动规则。

html, body{
  height: 100% !important;
}

我假设 Amp 团队注意到了这一点并替换了您的示例：

html, body {
  height: auto !important;
}

使用以下代码：

html:not([amp4ads]),
html:not([amp4ads]) body{
  height: auto !important;
}

此更改后，现在可以使用相同的选择器覆盖高度自动规则：

html:not([amp4ads]),
html:not([amp4ads]) body{
  height: 100% !important;
}

为什么“身高：自动！重要;”在默认的AMP CSS样式表中？它可以被覆盖吗？

4 个答案: