用于元素定位/调整大小的 css/javascript答案

【问题标题】：css/javascript for element positioning / sizing用于元素定位/调整大小的 css/javascript
【发布时间】：2016-09-08 05:22:20
【问题描述】：

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

我试图通过绝对位置来定位网页中的某些元素（div），相对于它们所在的元素。

这个想法是包含元素的顶部/左侧应该恰好是它在正常文档流中的位置，宽度应该设置为填充<body> 直到 RHS，减去一个小的边距和高度这样它会填充显示窗口的其余部分，减去页脚（也是 div）占用的空间。

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

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

我真正追求的是一些知道如何做到这一点的人关于要采取的方法的建议。最重要的是，考虑到浏览器窗口的约束和页脚元素占用的空间，我需要将包含元素扩展为尽可能大。

....更多信息请关注 cmets。

基本上，我正在尝试显示时间表，与电视/广播时间表不同。 IE。每个事件类一行，然后在每一行内，许多单独的事件显示在框中，“框宽度/位置”缩放到时间轴上实际事件的开始/结束。

我已经看到这只是使用 HTML 表格和大量列来获取必要的粒度，然后使用 colspan 来改变宽度。但是我想我会尝试用元素的绝对定位来做到这一点。第一个问题是包含元素不知道这个东西有多大，因为使用 position:absolute 会将每个元素从文档流中取出。因此，即使在包含元素上使用了overflow-x:auto，也没有滚动条。

我在使用 css/javascript 时没有任何进展（当然，肯定没有，但实际上甚至不是很快），我开始想知道密切控制 UI 的唯一真正方法是编写一个 java 小程序包含这一切？

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

【问题讨论】：

嗨，您需要分享您的工作代码，以便更好地了解您的情况。
通过绝对定位元素，您将它们带出定义包含元素高度的正常流程。您必须找到一些解决方法来正确定义容器的高度。
我无法提供代码 - 还没有任何接近工作的东西。从概念上讲，我不确定如何去做，这是主要问题。是的，我理解“将其排除在流程之外”的问题——这也是问题的一部分。我在上面添加了一些进一步的 cmets。

标签： javascript css dom applet element

【解决方案1】：

要让容器包含绝对元素，高度必须设置为固定高度或使用 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%);
}

带有 jQuery 的 JavaScript

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

【讨论】：