#CSS Wrapper無法識別內容

自從上週以來，我再次嘗試在缺少約2年後創建一個網站。它很好，直到我注意到當我最小化瀏覽器時，內容不會留在包裝中。我一直在尋找這個網站和谷歌的解決方案，但我似乎找不到合適的解決方案。大多數解決方案都提到＃浮點和溢出的問題，但我不使用浮點數（希望這不是問題），我一直在玩溢出，但我不能讓它工作。#CSS Wrapper無法識別內容

下面你可以找到我使用的CSS和HTML代碼。

的HTML：

<div id="wrapper"> 

     <div id="content"> 

      <div id="header"> 

       <div id="logo"> 
       <img src="style/images/logo.gif" width="184" height="73" alt="logo" /> 
       </div> 

       <div id="menu"> 
     <ul id="navlist"> 
         <li id="active"><a href="#" id="current">1</a></li> 
         <li>2</li> 
         <li>3</li> 
         <li>4</li> 
         <li>5</li> 
        </ul> 
       </div> 

      </div> 

      <div id="main"> 

       Title 

       subtitle 

      </div> 

      <div id="footer"> 

       <div id="left_banner"> 



       </div> 

       <div id="right_banner"> 



       </div> 

      </div> 

     </div> 

    </div>

和CSS

html, body, ul, li { 
    margin:0px; 
    padding:0px; 
    height:100%; 
} 

#wrapper { 
    text-align: center; 
background:url(images/bg.gif); 
    background-repeat:repeat; 
    height:100%; 
    width: 100%; 
    overflow:auto; 
} 

#content { 
    background-color: #fff; 
    margin: 0px auto; 
    width: 780px; 
    height: 100%; 
    border-left:#fd5d78 4px solid; 
    border-right:#fd5d78 4px solid; 
} 

#header { 
    position:relative; 
    height:120px; 
} 

#logo { 
    position:absolute; 
    right:43px; 
    top:37px; 
} 

#menu { 
    position:absolute; 
    bottom:0px; 
    left:58px; 
} 



#main { 
    position:relative; 
    left:25px; 
    top:35px; 
    width:730px; 
    height:320px; 
} 

#footer { 
    position:relative; 
    width:730px; 
    left:25px; 
    top:70px; 
    background-color:#0F0; 
    clear:both; 
} 

#left_banner { 
    position:absolute; 
    left:0px; 
    width:349px; 
    height:134px; 
    border:#fd5d78 2px solid; 
    background-color:#FFF; 
} 

#right_banner { 
    position:absolute; 
    right:0px; 
    width:349px; 
    height:134px; 
    border:#fd5d78 2px solid; 
    background-color:#FFF; 
}

感謝您的幫助一萬。

來源

2012-04-26 Chaputch

我把這個放在jsfiddle中，我不確定我看到了什麼問題。我在包裝上放了一個邊框，所有東西都留在裏面。「最小化瀏覽器」是什麼意思？ – 2012-04-26 11:27:03

我現在看到它。我需要一個背景圖像來複制。顯示：#wrapper上的塊會修復它（如jsuissa提到的）。 http://jsfiddle.net/ryanwfiorini/LC7TP/ – 2012-04-26 11:33:04

感謝您的幫助，也許我做了錯誤的事情，但顯示屏：塊不適合我...你有什麼建議嗎？ – Chaputch 2012-04-26 11:52:42

嘗試增加display:block;到#wrapper指定

來源

2012-04-26 11:27:53 jsuissa

它不工作:( – Chaputch 2012-04-26 11:45:01

嗯，我在Chrome中嘗試了你的代碼，沒有看到問題，當我在IE9中縮小尺寸時，紅色邊框與窗口縮小之間存在差距，添加display：block修復了這個問題。使用？ – jsuissa 2012-04-26 12:08:48

嗨，我在Vista上使用Chrome和IE9。當我查看JsFiddle（http://i46.tinypic.com/rcirnq.jpg）時，它仍然不包括這兩個盒子。 – Chaputch 2012-04-26 12:47:36

jsfiddle

我知道你說你不使用浮動，但這裏是使用它們的解決方案。您遇到的最大問題之一是您將兩個頁腳橫幅設置爲絕對位置，這會拋出父div上100％的高度。浮動和溢出：隱藏你可以將這些div返回到100％的計算。

我不得不對你的css做很多改變，所以把我在jsfiddle中的東西當作你的出發點。

來源

2012-04-26 14:06:07

#CSS Wrapper無法識別內容

回答

相關問題