菜單不在屏幕上，但頁面仍然無法滾動

我正在網站上工作，而且我遇到了一個問題，我無法在網上找到任何類型的解決方案，所以我很感謝您的幫助。菜單不在屏幕上，但頁面仍然無法滾動

我設計了一個下拉菜單，這是問題：如果頁面放大，它分成兩行（不需要，因爲它是一個下拉菜單！），但如果我設置一個菜單的最小寬度，因爲位置設置爲絕對，我無法滾動到右側，菜單剛剛熄滅。如果我爲身體標記設置最小寬度，它也不起作用，因爲它允許我滾動身體，但菜單保持不變！這是令人沮喪的

該位置必須保持絕對，否則我需要一個完整的方法來保持它的頂部，並感謝您的幫助，所以我正在尋找一個解決方案，讓我滾動到右側，如果屏幕真的放大了，就像智能手機一樣。這裏是菜單代碼（並不是所有的ofc，因爲它太長，但主要部分。要查看更多，請求它或訪問頁面，並看到源代碼）。

網站：http://newfutureuniversity.org/

HTML：

... 
<body> 
    <div id="container"> 
     <div class="menu" > 
      <ul> 
       <li><a href="http://newfutureuniversity.org/">New Future</a></li> 
       <li><a href="http://newfutureuniversity.org/learn/degree/">Learn</a> 
       <ul class="bottom"> 
       ... 
       </ul> 
       </li> 
...

CSS：

body    /* Changes the style for the whole body */ 
    { 
    position:absolute; 
    margin:0px;   /* Avoids margin in the whole page */ 
    padding:0px; 
    border:0px; 
    background-color: #EEEEEE; /* Default background color, light grey */ 
    height:100%;   /* Vertically complete */ 
    width:100%; 
    min-width:400px; 
    min-height: 100%; 
    color: #333;   /* Letters color */ 
    } 

#container   /* The container has the header, main and footer inside */ 
    { 
    position:relative; 
    margin:0px; 
    padding:0px; 
    min-height: 100%;  /* Avoids the footer to go up */ 
    height: auto !important; 
    height: 100%; 
    margin: 0px auto -51px; 
    } 
.menu 
    { 
    position: fixed; 
    top:0px; 
    left:0px; 
    opacity:0.3; 
    filter:alpha(opacity=30); /* For IE8 and earlier */ 
    width:100%; 
    min-width:400px; 
    border:none; 
    border-bottom:1px solid gray; 
    margin:0px; 
    padding:0px; 
    font-size:18px; 
    z-index:3; 
    } 

.menu ul 
    { 
    background:#DDD; 
    height:26px; 
    list-style:none; 
    margin:0px; 
    padding:0px; 
    z-index:3; 
    } 
    .menu li{ 
     width:24.5%; 
     min-width:93px; 
     float:left; 
     padding:0px; 
     margin: 2px 0px 2px 0.5%; 
     } 
...

編輯：您需要取消最大化和放大，看看在桌面瀏覽器的問題。

來源

2012-02-08 Francisco Presencia

即使當我最大化並縮放至300％時，也不會在Windows 7和IE9中看到它發生。你可以張貼問題的照片嗎？ – Jawad 2012-02-08 17:36:41

這裏添加的問題的圖片：http://oi40.tinypic.com/2eqc104.jpg – 2012-02-08 23:04:27

我不是特別確定你的意思是分成兩行。我曾在Firefox，Chrome，IE，Opera和我的iPhone上查看過您的網站，但無法重現您的問題。菜單簡單地從屏幕溢出並且出於最終項目「進入」的視野。我擔心你可能會遇到設計問題。我不會鼓勵你建立「一站式」的目標，而是瞄準你的觀衆。

您的理想解決方案對於您的菜單設計來說是相對不可能的。您正在使用固定/絕對位置並將其相對於窗口/屏幕視圖進行定位。當你在網頁上放大你的屏幕'浮動'時，絕對定位對象的位置是相對於屏幕（不是頁面）而且不會移動。

你可以通過js腳本來解決這個問題，該腳本允許根據比例尺進行定位修改，但我建議不要這樣做。我試圖解決類似的問題，這很快成爲設備特定的調試是一個噩夢，然而我們今天遇到的瀏覽器噩夢是最糟糕的。

至於解決方案，我強烈建議你看看幾個不同的框架。首先是一個CSS解決方案，lessframework。它爲您提供了一個簡單的框架，可用於多設備兼容的佈局而無需深入js。另一方面，如果JavaScript不是問題結賬jQuery Mobile。您可以輕鬆製作具有良好過渡效果的下拉菜單，與您創建的內容非常相似。

來源

2012-02-08 18:14:29

不，你不能重現它，因爲我可以得到2個不同的錯誤，如果我保留或刪除最小高度：400px;如果你真的想用其他方式檢查它，現在我刪除它，以便你能看到我的意思。我會檢查lessframework，但我可能最終會被設備分開，因爲這個問題只會在沒有最大化和真正放大到桌面瀏覽器時纔會遇到。謝謝你的詳細解答！編輯：記得按F5刷新style.css！ – 2012-02-08 18:30:09

最有可能的是，如果您創建桌面版本而另一個僅用於移動版本，則最好。您可能需要時間查看[tera-wurfl]（http://dbapi.scientiamobile.com/wiki/index.php/Main_Page）以獲得個人移動設備的幫助。它可以幫助提供諸如顯示器的寬度和高度等信息。 – 2012-02-08 19:10:01

再次感謝你，它肯定會幫助我很多 – 2012-02-08 23:05:03

菜單不在屏幕上，但頁面仍然無法滾動

回答

相關問題