響應標題與下拉菜單：高度和溢出

我需要一個響應標題，根據屏幕分辨率和元素的包裝更改高度。隨着屏幕變小，菜單包裹在我的標誌下面（這是可取的），並且標題的高度必須增加。很顯然，我已經將標題的屬性設置爲height: auto和overflow: hidden，這樣做會有所斬獲。響應標題與下拉菜單：高度和溢出

問題是：我正在使用下拉菜單。使用height: auto和overflow: hidden而不是標頭的固定高度，使得下拉項目很好......當然隱藏了。

我現在的問題是：解決這個問題的最好方法是什麼？首選純CSS的解決方案。

來源

2014-04-23 MrOrange

沒有代碼，通常很難猜測確切的問題是什麼，猜測答案通常是任何人都可以做的唯一事情。如果您提供以前嘗試的一段代碼，將會更容易理解您所遇到的具體問題。這段代碼甚至可能是完全不起作用的代碼，因爲它仍然可以更好地瞭解你準備做什麼。 – Joeytje50

我認爲描述很清楚：標題的高度需要依賴於內容（通常使用'overflow：hidden'），但仍然顯示標題中菜單中的下拉項目。如果不夠清楚，我會在明天發佈一些代碼。 – MrOrange

但是，您能否顯示一些代碼？沒有它，我不知道我應該與誰合作。 – Joeytje50

使用清除修復而不是隱藏的溢出。你想清除浮標，而不是實際上隱藏溢出。閱讀在這裏：

http://nicolasgallagher.com/micro-clearfix-hack/

<header class="clear-fix"></header>

有更優雅的方式，如果你使用一個預處理等

.clear-fix:before, 
.clear-fix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clear-fix:after { 
    clear: both; 
}

這裏是a jsFiddle，應該幫助。

來源

2014-04-24 00:45:43 sheriffderek

哇，那太完美了！這樣一個簡單的解決方案經過這麼多小時的努力來解決隱藏的溢出問題。我對這個@sherrifderek非常高興，我的網站的響應速度現在真的在一起:)謝謝！ – MrOrange

太棒了。祝你好運！是的，再看一下像「溢出隱藏」之類的東西 - 有很多事情是人們習慣的，因爲這裏有簡短的回答，因爲它們很容易 - 但人們不明白它們是如何工作的 - 最終造成各種問題。 – sheriffderek

@sherrifderek：我有一個很晚的後續問題！ :)有了這個解決方案，頭部響應（仍然是優先），但由於我的頭部有一個5px的邊框，下面的下拉項目有5px的不可點擊的邊距，如果訪客可以「丟失」下拉菜單從菜單項到下拉項目的速度不夠快。你介意看看http://www.purasol.co.cr/v2/並告訴我是否有解決方案嗎？我不能只是增加菜單項的鏈接邊距，因爲邊框現在包裹了它。 – MrOrange

響應標題與下拉菜單：高度和溢出

回答

相關問題