0

我有一个 div 标签，里面有内容，我希望它展开，所以我的页脚总是跟在它后面。事实上，我的内容标签没有扩展，我的页脚与我的内容重叠。如何使 div 展开并向下推我的页脚？

这是我的 HTML：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="Stylesheet" href="images/Main.css"" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="container">
            <div class="header">
                <div class="logo" id="logo"></div>
                <div class="socialNetworkingButtons"> </div>
                <div class="languageSelector"><a href="#"></a></div>
                <div class="headerBanner"></div>
                <div class="icons"></div>
                <div class="hr"><hr /></div>
            </div>
            <div class="content" id="home">
                <div class="videoBox"><img class="largeBlock" height="500" /></div>
                <div class="description"></div>
                <div class="keyFeatures"></div>
            </div>
            <br class="clear" />
            <div class="footer">
                <div class="copyright"><p>Here is some text</p></div>
            </div>
        </div>
        </form>
    </body>
    </html>

还有我的 CSS：

 html, body {
    width: 100%;
    height: 100%;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    background: #fff;
    margin: 0;
    padding: 0;
}

img, div {
    border: none;
}

span {
    margin:0;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #000;
    text-decoration: underline;    
}

.clear {
    clear: both;
}

/* contains all content on the page */
.container {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    clear:both;
}

/* begin header css */
.header {
    position: relative;
    top: 0px;
    left: 33px;
    width: 956px;
    height: 290px;
    display: block;
}

.logo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 143px;
    height: 83px;
}

.socialNetworkingButtons {
    position: absolute;
    top: 9px;
    left: 836px;
    width: 120px;
    height: 42px;
    text-align:right;
}

.languageSelector {
    position: absolute;
    top: 51px;
    left: 646px;
    width: 310px;
    height: 32px;
    text-align: right;
}

.headerBanner {
    position: absolute;
    top: 83px;
    left: 0px;
    width: 956px;
    height: 127px;
}

.icons {
    position: absolute;
    width: 956px;
    height: 64px;
    left: 0px;
    top: 210px;
    text-align:center;
}

.icon {
    width: 149px;
    height: 47px;
    display: inline;
    position: relative;
}

hr {
    color: #AF0837;
    background-color: #AF0837;
    height: 7px;
    width: 939px;
    margin: 0 auto;
    border: 0px;
}

div.hr {
    position : absolute;
    top: 275px;
    left: 0px;
    width: 956px;
    height: 6px;
}

/* end header css */

/* begin content css */
.content {
    position: relative;
    margin-top: 6px;
    width: 956px;
    display: block;
    float: left;
    margin-left: 43px;
    clear:both;
}

.videoBox {
    position: relative;
    float:left;
    width: 615px;
    height: 328px;
}

.title {
    position: relative;
    float:right;
    top: 0px;
    width: 341px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
}

.description {
    position: relative;
    float:right;
    top: 30px;
    width: 341px;
    height: 206px;
}

.keyFeatures {
    position: relative;
    float:right;
    width: 341px;
    height: 102px;
}

/* end content css */

/* begin footer css */

.footer {
    position: relative;
    width: 956px;
    height: 170px;
    left: 33px;
    top: 20px;
    display:block;
    clear:both;
}   

.copyright {
    background-color: #AF0837;
    width: 100%;
    height: 45px;
}

.copyright p{
    width: 100%;
    height: 45px;
    text-align: right;
    margin-top: 10px;
    color: #fff;
}
/* end footer css*/
4

4 回答 4

2

您为内容中的“videoBox”使用了两个单独的高度。一个在 CSS 中，一个在 HTML 中。

只需height: 328px;从videoBox您的 css 中删除即可停止重叠。

于 2012-04-13T19:39:14.047 回答
1

你可以尝试改变这个

<div class="content" id="home">
    <div class="videoBox"><img class="largeBlock" height="500" /></div>
    <div class="description"></div>
    <div class="keyFeatures"></div>
</div>

到

<div class="content" id="home">
    <div class="videoBox"><img class="largeBlock" height="500" /></div>
    <div class="description"></div>
    <div class="keyFeatures"></div>
    <div class="clear"></div>
</div>

编辑：修正了一个错字..我的错

于 2012-04-13T19:16:37.833 回答
0

您在 .description 和 .keyFeatures 类的样式中定义了明确的高度，我猜它们是变量内容所在的容器。这就是为什么它没有扩大，移除那些高度。

于 2012-04-13T19:18:20.613 回答
0

如果您不需要设置明确的高度，Redlena 是正确的。如果您确实需要设置显式高度并且需要父级拉伸，那么您应该在 CSS 中使用 'min-height' 属性。只需将您的“高度”声明更改为使用“最小高度”即可解决您的问题。

编辑：您也可以尝试将页脚固定到窗口底部。这是实现此目的的一种方法。

于 2012-04-13T19:21:01.777 回答