Question

我正在设计一个简单的网页。在网页正文中有两个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;
}

当我调整网页大小时，我想调整与top高度对应的div导航的headerDiv参数。请指导我如何做到这一点。我尝试在<head>：

中使用以下jQuery

$(window).resize(function() {
    var nav_div = $("#nav");
    var header_div = $("#headerDiv");
    nav_div.css("top", header_div.outerHeight);
});

它不起作用。我随机分配了百分比值到导航的顶部参数，这也没有成功。指导可以是程序性的或数学的。

Answer 1

$( window ).resize(function() {
        var nav_div= $("#nav");
        var header_div = $("#headerDiv");
        nav_div.css("top", header_div.outerHeight()+"px");
});

Answer 2

刚刚解决了你的问题，几个月前我遇到了类似的问题。尝试使用offsetHeight而不是outerHeight并添加“px”如果Piyush.kapoor的解决方案不起作用：

$(window).resize(function() {
    var nav_div = $("#nav");
    var header_div = $("#headerDiv");
    nav_div.css("top", header_div.offsetHeight + "px");
});

根据前一个div元素的高度更改div元素的顶部

2 个答案: