我正在设计一个简单的网页。在网页正文中有两个div。
<body>
<div id="headerDiv">
<img id="headerImg" src="./assets/dummy.png" width="15%" height="15%" alt="DummyLogo" style="float: left;"/>
<h1>Flex Series Cloud Solutions</h1>
</div>
<!--</div>-->
<div id="nav">
<script type="text/javascript">
$(document).ready(function() {
$("#nav").load("./nav.php", function() {});
});
</script>
</div>
</body>
html {
overflow: hidden;
}
body {
height: 100%;
overflow: hidden;
}
#headerDiv {
float: left;
margin-top: 0;
width: 100%;
padding: 1%;
height: auto;
background-color: #f1f1f1;
}
#nav {
position: absolute;
top: 18%;
bottom: 0;
width: 15%;
<!--height:84vh;-->
height: 84%;
padding: 1%;
overflow: auto;
border: 1px solid blue;
}
调整网页大小时，我想调整div nav的
top参数，使其与headerDiv的高度相对应。请指导我如何做。我尝试在<head>中使用以下jQuery：$(window).resize(function() {
var nav_div = $("#nav");
var header_div = $("#headerDiv");
nav_div.css("top", header_div.outerHeight);
});
它不起作用。我随机将百分比值分配给导航的顶部参数，该参数也无法解决。指导可以是编程的或数学的。
最佳答案
只是对您的问题感到困惑，几个月前我也遇到了类似的问题。如果Piyush.kapoor的解决方案不起作用，请尝试使用offsetHeight而不是externalHeight并添加“ px”：
$(window).resize(function() {
var nav_div = $("#nav");
var header_div = $("#headerDiv");
nav_div.css("top", header_div.offsetHeight + "px");
});
关于jquery - 根据上一个div元素的高度更改div元素的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38076779/