固定標頭 - 固定到輸入字段

Question

我的頁面有一個固定標頭。

當用戶沒有通過表單提交表單驗證我顯示錯誤的列表的形式以上每一個鏈接到產生錯誤的形式的元素。

然而，當我點擊鏈接到錨元件是由固定報頭隱藏。

我看到了許多使用僞類:before來解決這個問題的CSS的解決方案，但是這不能被施加到輸入元件。

是否有其他基於CSS的解決方案還是我不得不圍繞創建工作JS？

在此先感謝

Answer 1

有所有你可以設置padding-top你報頭的高度相等的錯誤信息的容器。然後它將清除該列表。你將不得不與px一起玩，以使其看起來正確。這不是一個完美的解決方案，但它很簡單。

這裏有一個簡單的例子，你沒有任何提供你的代碼：

HTML

<div id="header"> 
    Fixed Header 
</div> 
<div id="error"> 
    <ul> 
     <li>Error One</li> 
     <li>Error Two</li> 
     <li>Error Three</li> 
    </ul> 
</div> 

CSS

#header { 
    background-color: #ccc; 
    position: fixed; 
    height: 50px; 
    width: 100%; 
} 

#error { 
    padding-top: 50px; 
} 

這是jsfiddle form。希望我正確理解這個問題。