Css /javascript用于元素定位/大小

css/javascript for element positioning / sizing

本文关键字：定位 大小 元素 用于 javascript Css      更新时间：2023-09-26

我在寻找一些关于如何进行以下操作的一般指示。

我正在尝试通过绝对位置来定位网页中的一些元素(div)，相对于它们所在的元素。

这个想法是，包含元素top/left应该完全在正常的文档流中，宽度应该设置为它填充<body>到RHS，少一个小边距，高度应该填充显示窗口的其余部分，少一个脚(也是一个div)占用的空间。

完成后，我就可以在其中绝对地定位子元素。问题是设置包含元素的宽度/高度。

我已经尝试了各种位置属性和javascript执行onload()的组合，没有成功。我显然没有采取正确的方法。

我真正想要的是从知道如何做到这一点的人那里得到一些指示。最重要的是，考虑到浏览器窗口的限制和footer元素占用的空间，我需要将包含元素扩展到尽可能大。

…更多信息请看注释

基本上，我试图显示一个时间表，不像电视/广播时间表。也就是说，每行一个事件类，然后在每行中显示许多单独的事件，"框的宽度/位置"缩放到实际事件在时间轴上的开始/结束。

我曾见过简单地使用HTML表和许多列来获取必要的粒度，然后使用colspan来改变宽度。然而，我认为我应该尝试使用元素的绝对定位。第一个问题是，包含元素不知道这个东西有多大，因为使用position:absolute会将每个元素从文档流中取出。因此，即使在包含元素上设置了overflow-x:auto，也不能使用滚动条。

我没有得到快速与css/javascript(好吧，当然没有，但甚至不是非常快，实际上)，我开始怀疑唯一真正的方法来控制UI紧密是通过编写一个java applet来包含这一切?

因此我的问题是:从概念上讲，什么是解决这个问题的好方法?

对于包含绝对元素的容器，必须将高度设置为固定高度或使用Javascript动态设置高度。

参见示例https://codepen.io/jacobgoh101/pen/kkWJaL

HTML 

<div class="container">
  <img src="https://s21.postimg.org/c1m6ky7dz/kingston_creative_market_cover_small_f.jpg">
</div>
CSS 

.container {
  position: relative;
  width: 90%;
  border: 1px solid #000;
}
.container > img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Javascript with jQuery

window.onload = function() {
  var imgHeight = $('.container img').height();
  var targetHeight = imgHeight * 1.2;
  $('.container').height(targetHeight);
};
相关文章：