Question

外部div包含固定宽度和可变高度的内部div。内部div应该在它和外部div之间的所有4个边上都有5px的边距。

如果未指定内部div的高度，如何实现？

指定内部div的高度非常简单。但内部div是主页的内容容器。进入此div的内容对于使用母版页的每个页面都有不同的高度。

如果未设置内部div高度，则底部边距（内部div结束和外部div结束之间）总是2-3px太长。即5 5 5 8这种情况发生在浏览器类型中。

这是CSS：

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 14px;
}
#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 980px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;

}

***注意：将#content的margin-bottom设置为5px不起作用。

HTML：

    <div id="contentframe">
        <div id="content">
            variable height content will go in here
        </div>
    </div>

这应该很简单。设置：外部div填充为5px，就是这样。但是只有在指定内部div高度时才有效。否则会有一个恼人的“高”底部边缘。

编辑：完整来源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin-top: 0px;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 0px;
}

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background-color: #ffffff;
}

#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 1005px;
    margin: 0px;
    padding: 0px;
    height:300px;
    color: #ffffff;
    background-color: #000000;
}

</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

这应该适用于IE7 / 8和其他非IE浏览器。

<p>元素引入了顶部和/或底部的额外“填充/边距”。这是由于空内容/填充/边框区域（在本例中为contentFrame）的未拆除余量。请参阅折叠边距上的W3C Box Model。

围绕它有几种方法，其中一种方法是引入一个薄（1px）边框，它混合到DIV的背景中，然后用宽度/高度进行补偿。下面是通过操纵内容DIV中<P>元素的边距/填充来进行另一次黑客攻击。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin: 0;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin: 0 auto; /* merged */
    padding: 0;
}

#contentframe
{
    width: 1000px;
    margin: 0;
    padding: 5px;
    background-color: #ffffff;
}
#content
{
    padding: 0;
    color: #ffffff;
    background-color: #000000;
    height: auto;
    min-height: 300px;
}
#content p
{
    margin: 0px; /* removed the default margin of p element*/
    padding: 16px 0; /* replaced with padding to have background*/
}
</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
            </div>
        </div>
    </div>
</body>
</html>

如何在内部div周围放置一致的5px边距而不指定内部div高度？

1 个答案: