为什么这个 div 高度返回 0？答案

【问题标题】：Why is this div height returning 0?为什么这个 div 高度返回 0？
【发布时间】：2019-06-30 20:11:48
【问题描述】：

我完全坚持这个。我正在尝试获取 div 的高度，但它不断返回 0，尽管尝试了多种方法来解决问题。这是代码。

document.addEventListener("DOMContentLoaded", function() {
  const topDrawer = document.querySelector('.drawer__container--top');
  console.log(topDrawer.offsetHeight)
})

    .drawer {
    
        &__container {
            width: 100%;
            position: absolute;
            width: 90%;
            background: white;
            height: 500px;
            // left: 50%;
            transition: all .3s ease-in-out;
            border-radius: 1rem;
            box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
            z-index: 3;
            &--top {
                top: 0;
                // transform: translateY(-400px) translateX(-50%);
                
            }
    
            &--bottom {
                bottom: 0;
                transform: translateY(60vh) translateX(-50%);
                padding: 1rem 2rem;
                &.open {
                    transform: translateY(8vh) translateX(-50%);
                }
            }
        }

<script type="module" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script>
<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Actor&amp;display=swap" rel="stylesheet" />

<!-- This is the main body - every thing will go in here! -->
<div class="main">
    <div class="jp__header">
        <div class="jp__header__textrel">
            <div class="jp__header__textabs">
                <h1>Journey Planner</h1>
            </div>
            <div class="jp__header__weatherabs">
                <canvas id="icon2"></canvas>
            </div>
            <div class="jp__header__underline"></div>
        </div>
    </div>
    <div class="drawer drawer__container drawer__container--top">
    </div>
    <div id="map"></div>
    <div class="drawer__container drawer__container--bottom">
        <div class="drawer__search__wrapper">
            <ion-toolbar class="drawer__search__toolbar" no-shadow="">
                <ion-searchbar animated="" class="drawer__search__searchbar" mode="ios"
                    placeholder="Enter a bus stop number..."></ion-searchbar>
            </ion-toolbar>
        </div>
    </div>
</div>

我试过了 - 将其包装在windo.addEventListener("load", () etc) 以及使用这个“就绪”功能：

function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

使用 document.addEventListener("DOMContentLoaded")

也没有任何地方的浮动，但我尝试添加溢出：隐藏。

我正在使用 webpack 打包，但捆绑包被放在结束 body 标记之前。我认为没有理由不返回 500px 的高度...希望您能提供帮助。

编辑：我也在使用 Django 和模板——这会影响它吗？

第二次编辑：正如下面的@Thomas 所检测到的，所应用的样式似乎有一点延迟。应用设置的超时似乎可以让事情正常进行，所以我将继续这样做......非常莫名其妙。

【问题讨论】：

您能否将渲染的 HTML 放入问题中，而不是渲染HTML 的框架代码。你要求人们做大量的工作来发明一大堆东西来复制你的问题。您应该提供minimal reproducible example，但提供呈现的 HTML 可能就足够了。
抱歉，这很愚蠢，现在编辑
可能需要注意来自ionic的警告
有趣啊！没想到，我现在整理一下
遗憾的是没有变化

标签： javascript css height

【解决方案1】：

找到了这个问题的答案：非常感谢 @Tibrogargan、@Thomas 和 @Diego 帮助识别它。

问题在于离子导入：

<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet" />

在找到该 css 文件之前，不会加载脚本。我已经通过向文档加载处理程序添加 2ms 的 setTimeout 来解决它，但我还将研究如何在本地获取 css 或找到其他解决方案。

【讨论】：