Question

我正在讨论如何解决以下问题。

我试图将网页中的某些元素（div）按绝对位置放置，相对于它们所在的元素。

包含元素top / left的想法应该与正常文档流中的内容完全相同，宽度应该设置为使<body>填充到RHS，减少一小部分，和高度使其填充显示窗口的其余部分，减少页脚（也是div）占用的空间。

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

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

我真正追求的是那些知道如何做到这一点的人的一些指示。最重要的是，考虑到浏览器窗口的约束和页脚元素所占用的空间，我需要包含元素以扩展到尽可能大。

....更多信息以下评论。

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

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

我无法快速使用css / javascript（嗯，当然无处，但实际上甚至不是很快），我开始怀疑控制UI的唯一真正方法是通过编写一个java applet来实现包含所有？

因此我的问题是：从概念上讲，实现这一目标的好方法是什么？

Answer 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);
};

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

1 个答案: