這是我的工作例如：
http://jsfiddle.net/UGhKe/2/自動繼承div的頂部屬性的高度另一個div？

CSS

#body { 
    height: 200px; 
    background: black; 
    width: 100%; 
} 
.header { 
    position: fixed; 
    top: 0; 
    background: #369; 
    z-index: 1; 
    width: 100%; 
    height: 5em; 
} 
.content { 
    position: absolute; 
    top: 5em; 
    overflow: hidden; 
    height: 1000px; 
    background: #936; 
    z-index: 0; 
    width: 100%; 
} 
.footer { 
    position: fixed; 
    bottom: 0; 
    background: #396; 
    width: 100%; 
} 
.large { 
    font-size: 120%; 
    padding: 2em; 
}

HTML

<div id="body"> 
    <div class="header"> 
     <div class="large">Header</div> 
    </div> 
    <div class="content"> 
     Content, you should be able to see this when you scroll to top. 
    </div> 
    <div class="footer"> 
     <div class="large">Footer</div> 
    </div> 
</div>

我想，當你滾動頂部的內容將被放置在標題下方（但隱藏的，當你向下滾動，在標題下） - 這工作正常...

H但我需要刪除頂部：5em並使用類似「繼承標題的當前高度」 - 是否有可能沒有JS？

如果真的不可能沒有JS，那麼我可以使用JS，但我寧願嘗試在純CSS中找到解決方案。

編輯：

我要指出，我之所以不能使用頂部：5em的是因爲頭會不會有一個固定的高度 - 的圖像（徽標）將內部使用的文本，並將其設置爲最大寬度：100％，這樣它就可以縮小到iPhone的正確寬度，並且不會在iPad上擴展太多。

來源

2013-02-26 dan2k3k4

看看這是否適合你。 http://jsfiddle.net/UGhKe/3/

我增加了另一個div與height，但「非固定」模擬您的固定標題。

HTML

<div id="body"> 
    <div id="blockHeader"></div> 
    <div class="header"> 
     <div class="large">Header</div> 
    </div> 
    <div class="content"> 
     Content, you should be able to see this when you scroll to top. 
    </div> 
    <div class="footer"> 
     <div class="large">Footer</div> 
    </div> 
</div>

CSS

html, body { margin:0; padding:0; } 

#blockHeader 
{ 
    width:100%; 
    height: 5em; 
} 

.content { 
    position: absolute; 
    overflow: hidden; 
    height: 1000px; 
    background: #936; 
    z-index: 0; 
    width: 100%; 
}

來源

2013-02-26 19:50:48

我更新了我的問題，而你寫你的答案，我忘了提，頭不具有固定的高度。這將是具有最大寬度的圖像的高度：100％; - 我想我應該用圖片來說明我的意思（因爲圖片高度會根據瀏覽器的寬度而增長/縮小）。 – dan2k3k4 2013-02-26 20:00:44

嗯，我不認爲沒有JS就沒有可能。看看這個：http://stackoverflow.com/questions/6794000/css-fixed-position-but-relative-to-container。 – 2013-02-26 20:26:17

您可以使用變量（SASS使用以下爲）做到這一點。看看pen。

CODE：

$headerContentVariable: 5em; 

#body { 
    height: 200px; 
    background: black; 
    width: 100%; 
} 
.header { 
    position: fixed; 
    top: 0; 
    background: #369; 
    z-index: 1; 
    width: 100%; 
    height: $headerContentVariable; 
} 
.content { 
    position: absolute; 
    top: $headerContentVariable; 
    overflow: hidden; 
    height: 1000px; 
    background: #936; 
    z-index: 0; 
    width: 100%; 
} 
.footer { 
    position: fixed; 
    bottom: 0; 
    background: #396; 
    width: 100%; 
} 
.large { 
    font-size: 120%; 
    padding: 2em; 
}

來源

2013-02-26 19:52:15

自動繼承div的頂部屬性的高度另一個div？

CSS

HTML

編輯：

回答

相關問題