#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无法识别内容

回答

相关问题