css - 定位 Div 视口(viewport)高度的三分之一

Question

哟，我正在尝试使用三分法让我的网站看起来很漂亮。

我有一个相当高的 div，我想将其放置在距离浏览器窗口顶部视口(viewport)高度的 1/3 处。

所以这就是我觉得我应该做的，但它不起作用:

div {
  display: block;
  margin-top: 33vh; /* maybe margin-top: 33%; but that seemed to be worse */
  margin-left: auto;
  margin-right: auto;
  width: 50rem;
  transform: translate(0, -50%); /* To compensate for the divs own height */

  position: relative; /* Not relavent to this situation but might be causing problems? */
}

我特别想

transform: translate(0, -50%);

工作不正常。

感谢您的帮助!

Answer 1

如果我正确理解您的需求，最好的解决方案是使用 JavaScript。

对于 JavaScript 部分，您需要执行如下操作:

<script>
var vHeight = window.innerHeight; // get viewport height value
var vHeight3rd = vHeight/3; // get a 3rd of the viewport height value
$('div').css({position: 'absolute', marginTop: -(vHeight3rd)}); // assign a negative top margin of the 1/3rd value to position

// add for when resizing browser, value will be adjusted accordingly.
window.addEventListener('resize', function(){
    var vHeight = window.innerHeight; // get viewport height value
    var vHeight3rd = vHeight/3; // get a 3rd of the viewport height value
    $('div').css({position: 'absolute', marginTop: -(vHeight3rd)}); // assign a negative top margin of the 1/3rd value to position
});
</script>

我没有测试过上面的解决方案。但它应该按照您需要的方式工作。我的解决方案使用的是 jQuery，因此请确保将库添加到您的解决方案中。