標題邊緣的高度

我有一個標題position: fixed; 但它後面的內容仍然在標題後面。我試着用JS來設置內容的標題高度的margin-top，但不起作用。標題邊緣的高度

在這裏，你有HTML：

<!DOCTYPE html> 
<html>  
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="stylesheetini.css"> 
    <script src="javas.js"></script> 
    <title></title> 
</head>  
<body onscroll="scrolling()"> 
    <div class="header"> 
    <p>Example</p> 
    </div>      
    <div class="container"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci arcu. Morbi in neque libero. Pellentesque in tortor magna. Nam tempus suscipit sem id viverra. Duis blandit, massa sed tristique pharetra, mauris arcu convallis quam, id rutrum urna elit tristique mauris. Duis condimentum mi vel libero consectetur tempor. Ut tempor odio vitae neque varius, nec finibus leo rhoncus. 
    </div>    
    <div class="footer"> 
     ExampleExample 
    </div>  
</body>  
</html>

的CSS：

body { 
    background-color: #DFB36D; 
    text-align: center; 
} 

.header { 
    position: fixed; 
    font-size: 50px; 
    background-color: #BBBBBB; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.container { 

}

而且JS：

$(document).onload(){ 
     var headerHeight = $('.header').height() + 'px'; 
     $('.container').css('margin-top', headerHeight); 
    }

在此先感謝。 https://jsfiddle.net/nxhoqcz9/

實際刪除<center>標籤和.從身體

來源

2017-05-25 Luis M.

你能提供的這個的jsfiddle，所以我們有一個什麼樣的可視化表示是怎麼回事？ – Raptus

您使用jQuery，但我不能看到，您將此庫加載到您的項目中 –

我建議使用http://getbootstrap.com Bootstrap框架來開發高級網站。 –

你需要從你的HTML刪除<center></center>
在該CSS，刪除點前.body - >這就是爲什麼text-align: center;不工作
你hav e頁面中的jQuery？
語法JS是不正確

CSS：

body { 
    background-color: #DFB36D; 
    text-align: center; 
} 

.header { 
    position: fixed; 
    font-size: 50px; 
    background-color: #BBBBBB; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

JS：

$(document).ready(function() { 
    var headerHeight = $('.header').height() + 'px'; 
    $('.container').css('margin-top', headerHeight); 
}

HTML：

<!DOCTYPE html> 
<html>  
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="stylesheetini.css"> 
    <title></title> 
</head>  
<body onscroll="scrolling()"> 
    <div class="header"> 
     <p>Example</p> 
    </div>  
    <div class="container"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut orci arcu. Morbi in neque libero. Pellentesque in tortor magna. Nam tempus suscipit sem id viverra. Duis blandit, massa sed tristique pharetra, mauris arcu convallis quam, id rutrum urna elit tristique mauris. Duis condimentum mi vel libero consectetur tempor. Ut tempor odio vitae neque varius, nec finibus leo rhoncus. 
    </div>    
    <div class="footer"> 
     ExampleExample 
    </div> 

    <script 
     src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
     integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" 
     crossorigin="anonymous"></script> 
    <script src="javas.js"></script> 
</body>  
</html>

來源

2017-05-25 09:27:43 denisol

您使用$符號，但你沒有引用JQ庫

來源

2017-05-25 09:27:32

你的js代碼有問題... 試圖修復它像下面的代碼

$(function() { 
    var headerHeight = $(".header").height() + "px"; 
    $(".container").css("margin-top", headerHeight); 
});

或

window.onload = function() { 
    var headerHeight = $(".header").height() + "px"; 
    $(".container").css("margin-top", headerHeight); 
};

https://codepen.io/linjiyeah/pen/NjJXNo < ---你可以在這裏看到的結果

來源

2017-05-25 09:28:47 LinJI

爲什麼你需要JavaScript來解決這個問題？只需在容器中放置邊緣頂部。工作實例here

.container { 
    margin-top:200px 
}

來源

2017-05-25 09:32:50

我希望它成比例取決於大小。 –

已更新[codepen]（https://codepen.io/anon/pen/KmEZqP）。使用jQuery的document.ready函數。 –

有jQuery中沒有onload功能。文檔準備就緒後，您可以將其置於ready函數中。你可以這樣寫，而不用改變你的任何風格。

$(function(){ // You can also write $(document).ready(function({ // code}) like this 
    var headerHeight = $('.header').height() + 'px'; 
    $('.container').css('margin-top', headerHeight); 
})

入住這裏：https://plnkr.co/edit/hTUg5ANMifkPoc2z8lwW?p=preview

來源

2017-05-25 09:41:46

標題邊緣的高度

回答

相關問題