Question

我试图复制我经常在网页上看到的设计模式。我希望我的页面内容在窗口的整个高度后开始。
我有一个带有一堆链接的标题，这些链接在我的屏幕中垂直和水平居中，我希望第一段不显示在页面上（你应该滚动查看它，你应该只看到标题当你着陆在页面上。）我已经尝试将margin-top:100%应用于我的内容，但由于标题的高度已添加到边距，所以它在页面底部太远了。
示意图这将是这样的

<body>
<!-- You can see this when you load the page -->
<div id="header">
blablabla 
<a href="">Index</a>
<a href="">Contact</a>
<a href="">...</a>
</div>

<!-- You should scroll to see this -->
<div id="content">
<p>...</p>
</div>
</body>

在javascript中，这就是：

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var hheight = document.getElementById('header').offsetHeight;
document.getElementById("content").style.marginTop = (height - hheight)+ "px";

有关如何做到这一点的任何提示？我经常在移动设计上看到这种模式，但我从来没有想过如何做到这一点。我可以使用javascript来完成它，但我认为可能有一种方法可以用纯CSS进行...

Answer 1

使用$size = $image->getSize(); $width = $size->getWidth(); // 640 $height = $size->getHeight(); // 480 $size->scale(1.25); // increase 25% $width = $size->getWidth(); // 800 $height = $size->getHeight(); // 600 // or, as a quick example to scale an image up by 25% immediately: $image->resize($image->getSize()->scale(1.25));单位。 vh是视口的高度。这是一个参考 - https://developer.mozilla.org/en-US/docs/Web/CSS/length

100vh

body {
  margin: 0;
}
#header {
  height: 100vh;
  background: #eee;
}

窗口高度后启动内容

1 个答案: