Wie man die Webseite nach unten drückt, um in eine obere Leiste zu passen

Question

Gibt es eine Möglichkeit, die Höhe eines div-Elements mit Javascript zu messen?

Hier ist meine Situation: Ich habe eine obere feste Position Bar auf meiner Website, so auch wenn ich die Seite nach oben/unten scrollen, bleibt die Leiste oben, aber mein Problem ist bar überlagert die Webseite, was ich will ist bar die bpw für die höhe der bar nach unten, so dass sie wie gestapelt aussehen, ich schaffte es zu tun, durch feste höhe, sagen 50ox, ich html seite oberrand gesetzt und sie sah ok, wenn die höhe der bar zum beispiel ändert Die gleiche Seite in Handys zu sehen, geht schief, weil die Höhe des Balkens im Mobilbereich zunimmt, aber der obere Rand, den ich einstelle, ist immer noch 50, also brauche ich eine Möglichkeit, die tatsächliche Höhe des Balkens zu messen, wenn ti gerendert wird.

Answer 1

Wenn Sie die obere Leiste in Position fixieren, sollten Sie sich keine Gedanken über den darunter liegenden Inhalt machen, es sei denn, Sie haben ihre Positionen ebenfalls geändert. Wenn das der Fall ist, können Sie die Höhe eines Elements mit window.getComputedStyle() berechnen, und Sie können diesen Wert verwenden, um den Rand festzulegen.

var wrapper = document.getElementById("wrapper"); 
 
var banner = document.getElementById("banner"); 
 
var content = document.getElementById("content"); 
 

 
var bannerHeight = window.getComputedStyle(banner).height; 
 

 
console.log("Height of the banner is: " + bannerHeight); 
 

 
content.style.marginTop = bannerHeight;

#wrapper { background: #e0e0e0; } 
 
#banner { background: #ff0; position:fixed; top:0; width:100%; z-index:99; } 
 
#content { background: #66f; position:relative; }

<div id="wrapper"> 
 
    
 
    <div id="banner"> 
 
    <h1>This is the page banner</h1> 
 
    </div> 
 
    <div id="content"> 
 
    <h1>This is FIRST LINE of the main content area of the document.</h1> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p>  
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p>  
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p>  
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p> 
 
    <p>This is the main content area of the document.</p>  
 
    <p>This is the main content area of the document.</p>  
 
    </div> 
 
    
 
</div>