Question

我一直试图找到解决这个问题的方法并且用谷歌搜索超过一个小时，但我不知道如何绕过它。如果我为div包装器添加一个边框，它会将包装器推到页面顶部，而浮动的div保持在相同的位置。我试图摆弄溢出属性，以及相对和绝对定位。

css就在这里

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

html { background : #FFFFFF } 

#wrapper 
{ 
       background : #0066FF ;
       color : white ;
       height : 780px ;
       width : 1620px ;
       font : 16px "Arial", sans-serif ;
       margin : auto ;
       border : 4px solid black 
}



#header 
{ 
         height : 90px ;
         text-align : center ;
         color : black ; 
         background : #66CCFF ;
         padding : 3px 0px ;
         margin : 100px 0 10px ;
         clear : both
}

#header h1 
{
        font-weight : bold ;
        font-size : 35px ;
        padding : 20px 0
}

#left 
{ 
        float : left ;
        width : 180px ;
        height : 660px ;
        background-color : #66CCFF ;
        padding : 5px ;
        margin-right : 25px
}

#content 
{ 
     float : left ;
     background-color : #66CCFF ; 
     color : black ;
     height : 660px ; 
     width : 1140px ;
     margin-right : 25px ;
     padding : 5px 
}

#right 
{ 
       float : left ;
       background-color : #66CCFF ;
       color : black ;
       width : 220px ;
       height : 660px ;
       padding : 5px 
}

#footer 
{ 
       background-color : black ; 
       clear : both 
}

我还做了一个JSfiddle，其中包含HTML和一个包装器的示例，其中深蓝色背景向上跳跃。

Answer 1

此类问题通常是由默认的空格和填充引起的。浏览器的默认填充设置为5或10像素，这有时令人费力。当然，这并不总是导致问题的原因。每当我遇到这样的问题时，我会尝试在我的代码中为每个对象添加填充0和边距0，甚至是html和body，例如：

#example {
margin: 0px;
padding: 0px;
};

尝试[我看到你有几个，但不是每一个对象]。我不确定这是否能解决问题，但值得一试，它通常对我有用。这对任何人来说都是一个令人沮丧的问题。

编辑：[删除关于结束标记的评论]

Answer 2

好的，回答我自己的问题。我设法通过将标题div留在包装器之外来绕过这个。这样我就可以在标题和包装器周围放置一个边框，而页面不会向上移动。当然我在标题上使用了border-bottom：none，而在包装器上使用了border-top：none，然后边框看起来很好，内容应该是。

我不认为这是最好的答案，因为我还没有完全确定导致问题的原因，但我会继续寻找。

添加边框推送包装并使div内容成为溢出？

2 个答案: