當文字大於屏幕時，HTML滾動條不顯示

我製作的網站使用高度爲100％的大量DIV。現在，當文字大於頁面時，我想讓正常的滾動條出現。不幸的是，他們沒有。並嘗試overflow:auto anywehre，它變得越來越糟。當文字大於屏幕時，HTML滾動條不顯示

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
     <title>&lt;PageTitle&gt; | Anga Designs</title> 
<!-- Stylesheets --> 
     <link rel="stylesheet" type="text/css" href="css/standard.css" /> 
      <!--[if IE]><link rel="stylesheet" type="text/css" href="css/iefix.css" /><![endif]--> 
<!-- /Stylesheets --> 
<!-- Scripts --> 
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script> 
<!-- /Scripts --> 
<!-- Meta Tags --> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<!-- /Meta Tags --> 
    </head> 
    <body> 
<div id="bgstripe"></div> 
<div id="outercontainer"> 
    <div class="leftbar"></div> 
    <div id="innercontainer"> 
     <div id="header"> 
      <div class="leftbar"></div> 
      <div class="innercontent"> 

      </div> 
     </div> 
     <div id="content"> 
      <div> 
       <span class="articletitle">Page Title!</span> 
       <div class="articletitlebar"></div> 
      </div> 
      <div class="articletext"><p> 
       Put your text here 
      </div> 
     </div> 
    </div> 
    <div id="faderight"></div> 
</div> 
<!-- /container --> 
    </body> 
</html>

CSS

body, html { 
    margin: 0; 
    background-color: #eeeeee; 
    height: 100%; 
    font-family: Tahoma; 
    overflow: auto; 
} 

#bgstripe { 
    float: left; 
    background-color: #67a7ff; 
    width: 50%; 
    height: 100%; 
} 

#faderight { 
    position: relative; 
    float: right; 
    background: url('../images/layout/fade-right.jpg'); 
    width: 50px; 
    height: 100%; 
} 

#outercontainer { 
    position: relative; 
    margin: auto; 
    width: 1000px; 
    height: 100%; 
    background-color: #2a5d95; 
} 

#innercontainer { 
    position: fixed; 
    float:left; 
    width: 950px; 
    background-color: #2a5d95; 
} 

.leftbar { 
    position: absolute; 
    background: url('../images/layout/leftbar.png'); 
    width: 50px; 
    height: 100%; 
} 

.innercontent { 
    position: relative; 
    float: left; 
    background-color: #2a5d95; 
    height: 100%; 
    width: 100%; 
    margin-left: 50px; 
} 

#header { 
    position: relative; 
    float: left; 
    width: 950px; 
    height: 200px; 
} 

#content { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 100%; 
} 

.articletitle { 
    background-color: #003366; 
    padding: 10px 10px 10px 60px; 
    font-size: 20px; 
    font-family: Georgia; 
    color: #eeeeee; 
} 

.articletitlebar { 
    position: absolute; 
    width: 50px; 
    height: 40px; 
    background: url('../images/layout/articletitlebar.png'); 
    margin-top: 10px; 
} 

.articletext { 
    display:block; 
    position: absolute; 
    margin-left: 70px; 
    margin-top: 10px; 
    margin-right: 20px; 
    margin-bottom: 10px; 
    width: 700px; 
    min-height: 500px; 
}

任何人誰可以幫助我？我現在完全失去了.. 在線樣品：http://rune.blupfis.nl/wendy/

來源

2012-01-16 Deep Frozen

你有在線樣本，我們可以看看嗎？ – 2012-01-16 19:46:40

在線樣本在這裏：http://rune.blupfis.nl/wendy/ – 2012-01-16 19:52:14

位置：固定在#innercontainer是問題的一部分，如果不是整個問題。這將像一個絕對定位的元素，並從正常流程中刪除。

來源

2012-01-16 19:56:15 Rob

是的，在innercontainer'位置：絕對'固定的滾動，但螺絲在底部的佈局。我認爲你應該尋找這種佈局的在線樣本。 – Dementic 2012-01-16 19:58:15

謝謝，我完全錯過了..滾動條現在出現！ :) – 2012-01-16 20:00:11

小問題仍然是：當向下滾動，底部將是白色..任何想法如何解決它？無法找到該問題：S – 2012-01-16 20:08:00

這裏的問題是您的contentdiv的高度設置爲100％。這使得它擴大，使其與內容高度相同。如果你嘗試更多的東西是這樣的：

#content { 
    float: left; 
    height: 500px; 
    overflow: auto; 
    position: relative; 
    width: 100%; 
}

你應該看到滾動條出現（但其他一些造型現在可能丟失）。

來源

2012-01-16 19:58:04

當文字大於屏幕時，HTML滾動條不顯示

回答

相關問題