css固定頭溢出？

我有以下代碼：css固定頭溢出？

<div id="header"> 
    <h1>HEADER TEXT</h1> 
    <div id="members"> 
    <form action="" method="post"> 
    <input type="text" value="Search this site" /> 
    </form> 
    <a href="#">Member Login</a> 
    </div> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
    </div> 
</div> 
<div id="main"> 

</div> 
</body>

而這裏的CSS：

<style> 
body { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 16px; 
    background-color: #EEE; 
    color: #111; 
    margin: 0; 
    padding: 0; 
} 
h1 { 
    display:inline; 
    margin:0; 
    padding:0; 
    color:#000; 
} 
#header { 
    position:fixed; 
    width:100%; 
    min-width:100%; 
    background-color:#EEE; 
} 
#members { 
    position:absolute; 
    right:.5em; 
    bottom:3em; 
    margin: 0; 
    padding: 0; 
} 
#members form { 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 
#nav { 
    border-bottom:1px solid #3d5086; 
    font-size:13px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-weight: bold; 
    height: 3.5em; 
    border-top: 1px solid #7683c4; 
    background-color: #44529C; 
    width: 100%; 
    min-width: 100%; 
    overflow: hidden; 
} 
#nav ul { 
    padding:0; 
    margin:0; 
} 
#nav li { 
    display:inline; 
    list-style-type:none; 
    margin:0; 
    cursor:pointer; 
    border-left: 1px solid #7085ba; 
    border-right: 1px solid #3d5086; 
    float: left; 
    height: 2.5em; 
    padding-top: 1em; 
    text-shadow: 1px 1px 1px #111; 
} 
#nav li:hover { 
    background-color:#5a64b3; 
    color:#FFF; 
} 
#nav a { 
    padding: 1.6em; 
    color: #EEE; 
    text-decoration: none; 
} 
#main { 
    background:#FFF; 
    width: 1000px; 
    height: 1000px; 
    margin: 0 auto; 
    border-left: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
} 
</style>

我遇到的問題是，如果我縮小窗口足夠小，在#nav的鏈接開始消失（或者如果溢出沒有被隱藏，它會被推到下一行）。我無法爲#nav指定寬度，因爲我需要背景來延長100％。有這個簡單的解決辦法嗎？另一個小問題是，如果窗口縮小得足夠小，h1和#members div不會重疊？感謝您的任何建議！

來源

2012-06-16 Drew

嘗試將最小寬度設置爲仍顯示正常的最小大小。

來源

2012-06-16 21:50:47 Tschallacka

最小寬度是什麼？如果我在#nav上設置它，背景顏色不會在屏幕上延伸100％。 – Drew

以及如果您設置最小寬度：111px;寬度：100％;最大寬度：100％ – Tschallacka

把display:inline放在#nav和/或＃標題

來源

2012-06-16 21:52:35 poepje

css固定頭溢出？

回答

相關問題