針對響應式固定標題和粘性頁腳存在問題

-1

我遇到問題以解決標題問題。我已經設法使頁腳變得粘性和響應，現在我想要標題爲固定爲並響應不同的屏幕大小。這是我試過到目前爲止：針對響應式固定標題和粘性頁腳存在問題

現場演示http://jsbin.com/vevay/1/edit?html,css,output

HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Responsive Sticky Footer</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 

</head> 
<body class="container"> 
    <div class="block header_block"> 
     <h1>Responsive Fixed Header</h1> 
    </div> 


    <div class="block push body_block"> 
     <h2>Body Content</h2> 

    </div> 

    <div class="block footer_block"> 
     <h2>Responsive The Sticky Footer</h2> 
     <h1>cool</h1> 
    </div> 
</body> 
</html>

CSS代碼

html { 
    height: 100%; 
} 
.container { 
    display: table; 
    height: 100%; 
} 
.block { 
    display: table-row; 
    height: 1px; 
} 

.push { 
    height: auto; 
} 

.container { 
    width: 100%; 
    margin: 0 auto; 
} 
.block:nth-child(odd) { 
} 

.header_block{ 
    background: grey; 
} 

.body_block{ 
    background: lightblue; 
} 

.footer_block{ 
     background: green; 

}

更新：

在發佈這個問題之前，我做了一些研究員，他們是this one但頁腳沒有響應，這就是爲什麼我發佈這個問題。

編輯

我已經想出了另一種解決方案：http://jsbin.com/gevafi/2/edit但我還是在頁腳的左下方保證金。

EDIT 2

臨時解決方法：http://jsbin.com/vokiqi/1/edit?html,css,output

來源

2014-11-04 Asme Just

當我調整jsbin的輸出窗口的大小時，內容全部調整得很好，sooooo我不確定問題出在哪裏？ – MattD 2014-11-04 21:40:46

我想在滾動時修改標題 – 2014-11-04 21:43:51

通常您只需將標題的位置設置爲固定。但是你會因爲使用表格而苦苦掙扎。 – chdltest 2014-11-04 21:58:50

決定要對你的憐憫和從頭開始創建一個適合你：http://jsfiddle.net/yo2ukrua/3/

而不是使用表，我刪除了所有的它，保持它們爲塊。對於你的設置，你並不是真的需要任何表格，我猜你只使用它，這樣你可以讓你的頁腳粘在底部。

一旦他們回到塊，你可以給頁腳和頁眉一個固定的位置，設置頁腳底部和頁眉頂部。

然後在主體上應用頂部和底部邊距，邊距應該是頁腳和頁眉的高度。

CSS：

.header_block { 
     background: grey; 
     position: fixed; 
     width: 100%; 
     top: 0px; 
} 

    .body_block { 
     background: lightblue; 
     margin-bottom: 18px; /* height of your footer */ 
     margin-top: 18px; /* height of your header */ 
    } 

    .footer_block { 
     background: green; 
     bottom: 0px; 
     position: fixed; 
     width: 100%; 
    }

HTML：

<body class="container"> 
    <div class="block header_block"> 
    <h1>Responsive Fixed Header</h1> 
    </div> 
    <div class="block push body_block"> 
    <h2>Body Content<br>Body Content<br>Body Content <br>Body Content <br>Body Content<br>Body Content<br>Body Content<br>Body Content</h2> 
    </div> 
    <div class="block footer_block"> 
    <h2>Responsive The Sticky Footer</h2> 
    <h1>cool</h1> 
    </div> 
</body>

或者，你可以有更好的頁腳

http://jsfiddle.net/yo2ukrua/15/

它使用具有窗口大小的最小高度的div（推），但如果窗口大小小於內容（創建滾動），它將使用內容本身的高度，因此始終將頁腳推到底部。頁腳還保留相對位置。

來源

2014-11-04 22:20:59 chdltest

感謝您決定憐憫我:)。我只是在這裏發佈之前測試了我的絆腳石。這個解決方案的問題是頁腳總是固定在底部。換句話說，頁腳始終可見。這不是我想要的。謝謝你嘗試。 – 2014-11-04 23:02:19

然後你有其他的選擇來解決這個問題。您可以將頁腳設置爲絕對，而不是固定，然後使用JS將其設置爲相對，如果屏幕太小，則不需要高度。接下來是將其設置爲相對，並給body/html 100％的高度，然後將高度100％應用於div。 – chdltest 2014-11-04 23:12:53

我不想爲此使用JS。我已經拿出這個http://jsbin.com/gevafi/1/edit?html,css,output，但他們是留在頁腳底部的保證金 – 2014-11-04 23:36:13

針對響應式固定標題和粘性頁腳存在問題

回答

相關問題