帶動態高度的固定導航欄後的容器

Question

我有一個動態高度（最小高度：50px）的標題。

當然，它可以高於50px。我想要一個容器，下面有一些內容。

我可以用保證金或其他格式來做這件事嗎？

Answer 1

你的意思是那樣嗎？

body { 
 
    height: 500px; 
 
    background-image: linear-gradient(to bottom, #eee 0%, #000011 100%); 
 
} 
 
.header-container { 
 
    position: fixed; 
 
    width: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.header { 
 
    min-height: 50px; 
 
    padding: 15px; 
 
    background-color: #72f072; 
 
} 
 
.header-container .header p, 
 
.header-container .something p { 
 
    margin: 0px; 
 
} 
 
.header-container .something { 
 
    padding: 15px; 
 
    background-color: #fff; 
 
}

<div class="header-container"> 
 
    <div class="header"> 
 
    <p>some content</p> 
 
    </div> 
 
    <div class="something"> 
 
    <p>some other content</p> 
 
    </div> 
 
</div>

Answer 2

您應該向容器提供與固定導航欄高度相等的頁邊距。但由於導航欄高度可能需要增長，因此我通常會根據需要更改高度和容器邊距，並使用媒體查詢。

Answer 3

獲得頭高度，並使用JS距頂部分配給內容股利。

var height = document.getElementById("head").offsetHeight; 
document.getElementById("content").style.marginTop = height + 'px';