Question

哟，我正试图通过使用三分法来让我的网站看起来很蠢。

我有一些相当高的东西，我想将视口高度距离浏览器窗口顶部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，因此请确保将库添加到您的解决方案中。

定位Div视点高度的三分之一

1 个答案: