CSS溢出：滾動錯誤的地方？

-1

我正在使用Dreamweaver CC 2014創建網站。首頁滾動正常，但關於頁面和日曆頁面根本不滾動，並切斷了應顯示的下半部分。我讀過其他線程，說增加溢出：滾動代碼到CSS。我已經這樣做了，但它仍然無法正常工作，我想知道是否將代碼放在錯誤的地方？CSS溢出：滾動錯誤的地方？

這裏是鏈接到日曆頁： http://normajdougherty.com/Calendar.html

你看看CSS和HTML代碼，讓我知道是什麼問題？非常感謝。

來源

2014-10-20 Jennifer

你有

position:fixed;

在您的導航欄，這是有效地「鎖定」的頁面中指定位置。如果您將其位置設置爲相對位置，則您的菜單項（不應設置爲「固定」）不再會附加到導航欄。

但是，你首先實現了導航欄的方式是kludgy。你不需要在後臺的藍色欄中有一個單獨的div。

而不是有兩個重疊的固定div，這是一個不好的做法由於幾個原因，只需將您的導航按鈕放在一個背景顏色的單獨的div，使用「background-color」屬性。

此外，它在中途顯示「切斷」的原因是因爲這只是您在背景中使用的圖像的大小。考慮設置一個顏色漸變或其他東西，或者說老實說，只是讓背景變成純色。除非你特別喜歡做一些事情，否則這樣一個巨大的靜態圖像不會像你想要的那樣。

編輯：好的，乍一看，它看起來像整個頁面被包裹在導航欄div。這就是爲什麼當設置「position：fixed」時整個頁面被鎖定的原因。確保在頁面內容的其餘部分開始之前關閉導航欄的標記。

但是，您仍然不應該在頁面中間有一個固定的導航欄，因爲它會隨着您的其餘內容向下滾動，並最終看起來非常糟糕。

來源

2014-10-20 12:44:19

這是因爲你在導航欄類中設置

positon:fixed;

。刪除它，頁面會正常工作

所以刪除

position:fixed

從.navbar類

在calendar.css

來源

2014-10-20 12:45:25 Justin

，因爲你的頁面的內容部分被包裹在裏面的你面臨這樣的問題navbar div已分配fixed的位置。您需要在navbar div之後添加intro div和以使您的網站正常運行。

這是怎樣的代碼，特別是部分目前看起來像在您的網站（通知<div class="intro">和裏面<div class="fluid navbar">）：

<div class="fluid navbar"> 
    <img src="images/BlueNavBar.png" alt="navigation menu"> 
    <div id="menu"> 
     <ul> 
      <li><a href="index.html">HOME</a> 
      </li> 
      <li><a href="About.html">ABOUT ME</a> 
      </li> 
      <li><a href: "books.html"="">BOOKS</a> 
      </li> 
      <li>BLOG</li> 
      <li>MEDIA KIT</li> 
      <li>SPEAKER</li> 
      <li><a href="Calendar.html" calendar<="" a=""></a> 
      </li><a href="Calendar.html" calendar<="" a=""> 
     <li>CONTACT</li></a> 
     </ul><a href="Calendar.html" calendar<="" a=""> 
     </a> 
    </div> 
    <div class="intro"> 
     <p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b> 
     </p> 
    </div> 
    <br> 
    <center> 
     <iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&amp;ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> 
    </center> 
</div>

而且這是你應該如何修改（包括<div class="intro">和 <div class="fluid navbar">之後添加）：

<div class="fluid navbar"> 
    <img src="images/BlueNavBar.png" alt="navigation menu"> 
    <div id="menu"> 
     <ul> 
      <li><a href="index.html">HOME</a> 
      </li> 
      <li><a href="About.html">ABOUT ME</a> 
      </li> 
      <li><a href: "books.html"="">BOOKS</a> 
      </li> 
      <li>BLOG</li> 
      <li>MEDIA KIT</li> 
      <li>SPEAKER</li> 
      <li><a href="Calendar.html" calendar<="" a=""></a> 
      </li><a href="Calendar.html" calendar<="" a=""> 
     <li>CONTACT</li></a> 
     </ul><a href="Calendar.html" calendar<="" a=""> 
     </a> 
    </div> 
</div> 
<div class="intro"> 
    <p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b> 
    </p> 
</div> 
<br/> 
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&amp;ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>

來源

2014-10-20 12:52:51

在Calendar.html的標頭部分添加這兩種類型（此代碼被寫入內部的CSS，是導致此代碼不會影響其他頁面）

#menu {position: absolute; } .navbar {position: static;}

來源

2014-10-20 13:10:37

CSS溢出：滾動錯誤的地方？

回答

相關問題