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」に 2 つの異なる高さを使用しました.1 つは CSS で、もう 1 つは HTML です。

height: 328px;cssから を削除するだけvideoBoxで、オーバーラップを止めることができます。

于 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」プロパティを使用する必要があります。「高さ」宣言を「最小高さ」を使用するように変更するだけで、問題が解決するはずです。

編集:フッターをウィンドウの下部に固定することもできます。これを実現する 1 つの方法を次に示します。

于 2012-04-13T19:21:01.777 に答える