html - 如何使 DIV 标签拉伸(stretch)到其子标签的大小？-6ren

html - 如何使 DIV 标签拉伸(stretch)到其子标签的大小？

转载作者：太空宇宙更新时间：2023-11-04 00:18:40

24

4

我有一个包含内容的 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*/