Question

我对JavaScript的了解非常少。我想根据较高的一个高度使两个div的高度相等（然后扩展它们的容器以适应它，但我需要先让这个部分工作）。我已经尝试过用CSS找到的所有内容，问题只存在于IE7中。

首先它告诉我内容和侧边栏的document.getElementById（我一次只尝试过一次）为null。所有我能找到的是它应该是在页面加载后通过物理放置在内容之后或使用window.onload我尝试了各种组合，然后用无名函数，命名函数，由onclick触发的函数或onmouseover，但仍然没有任何反应。

原样，它不再给我null错误，但没有任何反应，也没有任何错误。

我在这里找不到什么东西？

<body>
<div id="contentwrapper" role="presentation">
        <div id="content" role="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor. Suspendisse viverra tortor eget nisl elementum scelerisque id id tortor. Vestibulum quis mi non purus gravida tincidunt sed sed elit. Phasellus iaculis commodo erat, pellentesque egestas lectus feugiat non. Maecenas nulla neque, semper vel sem sed, volutpat venenatis ipsum.</p>
</div>

        <div id="sidebar" role="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consectetur, risus vitae ultrices pellentesque, urna massa semper purus, a rutrum neque nunc venenatis tortor.</p>
</div> 
</div>


<script type="text/javascript">
window.onload = function(){
    var contentheight = document.getElementById("content").clientHeight;
    var sidebarheight = document.getElementById("sidebar").clientHeight;


    /*if(contentheight != sidebarheight) {
        if(sidebarheight > contentheight) {
            document.getElementById("content").style.height = sidebarheight;
        }else{*/
            document.getElementById("sidebar").style.height = contentheight;
       /* }
    }
}*/
}
</script>
</body>

（是的，其中大部分已被注释掉，因为我只是试图让它做某事）

如果CSS对它有任何影响：

#contentwrapper {
    width: 500px;
    border: 1px solid black;
    height: 100%;
    background: #DDF;
    position: relative;
}

#content {
    width: 300px;
    display: block;
    background: #FDD;
    display: inline;
    position: absolute;
    left: 0;
}

#sidebar {
    width: 200px;
    display: block;
    background: #DFD;
    display: inline;
    position: absolute;
    right: 0;
}

Answer 1

clientHeight property是一个整数，表示以像素为单位的高度。如果没有连接的度量单位，则style属性无法理解数字，因此您必须将其添加到。

if(contentheight != sidebarheight) {
    if(sidebarheight > contentheight) {
        document.getElementById("content").style.height = sidebarheight + 'px';
    } else {
        document.getElementById("sidebar").style.height = contentheight + 'px';
    }
}

_{未经请求的意见 :(顺便说一句，虽然获得高度表现是最常见的CSS挑战之一，但我相信你应该找到一种非js方式来实现目标你正在寻找，如果你努力的话。如果问题是IE7--一个8岁的浏览器，你应该放弃支持 - 考虑使用垫片使其表现，例如）}

document.getElementById null和/或不工作，即使它在那里并且在它被加载之后

1 个答案: