基於以前的div元素的高度更改div元素的頂部

我正在設計一個簡單的網頁。在網頁主體中有兩個div。基於以前的div元素的高度更改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; 
}

當我調整網頁我想調整對應的headerDiv高度top參數DIV導航的。請指導我如何做到這一點。我試過在<head>裏面用下面的jQuery：

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

它不工作。我隨機將百分比值分配給導航的頂部參數，但也沒有發揮作用。指導可以是編程或數學的。

來源

2016-06-28 Mat

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

來源

2016-06-28 12:53:18

沒有Piyush它不工作。 – Mat

你能提供一個小提琴嗎？ –

現在檢查它是jQuery的功能 –

只是在你的問題上出現了問題，幾個月前我也遇到過類似的問題。嘗試使用offsetHeight而不是outerHeight並添加「px」，如果來自Piyush.kapoor的解決方案不起作用：

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

來源

2016-06-28 13:05:41 Lord7even

基於以前的div元素的高度更改div元素的頂部

回答

相關問題