javascript - 替代更新 parent 高度的绝对定位

coder 2023-08-12 原文

我正在开发一个绘制括号的库。

我正在使用 javascript 计算每个元素(匹配项和行)的坐标。每个元素都有 position: absolute;并使用 left和 top设置他们的 x和 y坐标。

因为我用的是position: absolute;有必要将父级设置为 position: relative;以便 children 相对于他们的 parent 定位。

在我注意到 parent 的高度没有从它的 child 那里更新之前，这是完美的，因为 position: absolute;元素从文档流中取出。

我需要父级有高度，以便我可以在下面放置其他元素，并赋予父级样式，例如 background-color ...

是否有替代绝对定位的方法，既使用 x 和 y 坐标，又将它们保留在文档流中以允许父级 width和 height自动调整？
或者，如果这不可能，是否可以使用 vanilla javascript(无 jQuery 或其他库)找出父 div 内容的宽度和高度。如果可能的话，我可以设置 parent 的 width和 height通过 javascript 设置样式。

到目前为止我尝试了什么

我试图将 child 设置为 position: relative;而不是 position: absolute;如果你只有一个 child ，我相信这会奏效。然而，如果有多个 child ，这些 child 就不再与 parent 相关，而是与前一个 child 相关，这就把事情搞砸了。

即使父级没有高度，页面上仍然有一个垂直滚动条。使用 javascript，我试图获取 scrollHeight和 height document 等元素, document.body和 window .这不起作用，因为结果是 undefined或者结果不正确。

现在我的临时解决方案是设置body高度为 2500px这应该是它需要达到的最高水平。这样做的问题是总会有一个滚动条，大多数时候滚动到什么都没有。

代码

<div class="BrackChart_wrapper">
    <div class="BrackChart_match"> ... </div>
    <div class="BrackChart_line"></div>
    etc.
</div>

.BrackChart_wrapper {
    position: relative;
    top: 0px;
    left: 0px;
}

.BrackChart_match, .BrackChart_line {
    position: absolute;
}

感谢您的帮助，非常感谢!

JSFiddle:https://jsfiddle.net/jmjcocq8/1/

解决方案:https://jsfiddle.net/jmjcocq8/2/

最佳答案

我相当确定没有其他选择既可以让您绝对地(相对于他们的父级)定位子级，又可以让他们保持在流中，以便他们对父级的大小做出贡献。

但由于您是自己计算元素的位置，并且您知道它们有多高，所以您可以根据最低的子元素的 y 加上高度来设置父元素的高度。

您还没有显示您的代码，但是例如:

var forEach = Array.prototype.forEach;
function positionChildren(parent) {
  var left = 0;
  var top = 0;
  forEach.call(parent.children, function(child, index) {
    child.style.left = left + "px";
    child.style.top = top + "px";
    left += 20;
    top += 10;
  });
  var height = top - 10 + 1 + parent.lastElementChild.clientHeight;
  console.log("height = " + height);
  parent.style.height = height + "px";
}

positionChildren(document.getElementById("parent"));

#parent {
  border: 1px solid black;
  background-color: #ddd;
  position: relative;
}
.child {
  position: absolute;
  border: 1px solid blue;
  padding: 0;
  margin: 0;
}

<div id="parent">
  <div class="child">Child1</div>
  <div class="child">Child2</div>
  <div class="child">Child3</div>
</div>

关于javascript - 替代更新 parent 高度的绝对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45252679/

javascript 绝对 code section parent html css

有关javascript - 替代更新 parent 高度的绝对定位的更多相关文章

ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2
我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。最佳答案如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数
ruby-on-rails - 更好的替代方法 try( :output). try( :data). try( :name)? - 2
“输出”是一个序列化的OpenStruct。定义标题try(:output).try(:data).try(:title)结束什么会更好？:) 最佳答案或者只是这样:deftitleoutput.data.titlerescuenilend 关于ruby-on-rails-更好的替代方法try(:output).try(:data).try(:name)?，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c
「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2
我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U
ruby-on-rails - Rails Associations 的更新方法是什么？ - 2
这太简单了，太荒谬了，我在任何地方都找不到关于它的任何信息，包括API文档和Rails源代码:我有一个:belongs_to关联，我开始理解当您没有关联时您在Controller中调用的正常模型方法与您有关联时调用的方法略有不同。例如，我的关联在创建Controller操作时运行良好:@user=current_user@building=Building.new(params[:building])respond_todo|format|if@user.buildings.create(params[:building])#etcetera但我找不到关于更新如何工作的文档:@user
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2
我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:
ruby-on-rails - 未定义方法 `parent' 为 nil :NilClass - 2
我在使用Rails3.0.2时遇到了这个奇怪的错误。ActionView::Template::Error(undefinedmethod`parent'fornil:NilClass):app/controllers/channels_controller.rb:19:in`index'这是Controller，19行是respond_with(@channels)block。我从哪里开始搜索错误？classChannelsController这是完整的错误:ActionView::Template::Error(undefinedmethod`parent'fornil:NilCl

javascript - 替代更新 parent 高度的绝对定位

有关javascript - 替代更新 parent 高度的绝对定位的更多相关文章

随机推荐