0

次のレイアウト構造があります。

<div id="wrapper">
    <div id="head"></div>
    <div id="columns">
        <div id="menu"></div>   
        <div id="content"></div>
    </div>            
    <div id="foot">
        <div id="copyright"></div>
        <div id="username"></div>
    </div>
</div>

このCSSで：

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;    
}

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;      
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {      
    position: absolute;
    width: 1000px;
    bottom: 20px;
    left: 0px;
}

問題は、フッターがページの「上に」表示され、コンテンツ - div が「大きい」ことです。つまり、フッターの下に何かがあることを意味します。見る：

スクリーンショット

フッターに position: relative を使用すると、少し下に表示されますが、思ったように columns-div の下には表示されません。私も clear:both で試しましたが、何も変わりません。

私はCSSの専門家ではないので、誰かが解決策を投稿して、フッターがこのように表示される理由を説明できますか?

4

2 に答える 2

0

わかりました、DaveHogansのコメントは私を次の解決策に導きます：

div#wrapper {    
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;   
}

div#head {
    position: relative;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {  
    clear:both;
    position: relative;
    width: 1000px;
    padding-top: 10px;  
    padding-bottom: 50px;
}
于 2012-08-08T11:24:09.290 に答える
0 
    <style>

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;    
}

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;      
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {
    margin-top:25px;   
    width: auto;
  }

    </style>


 <div id="wrapper">
    <div id="head"></div>
    <div id="columns">
        <div id="menu"></div>   
        <div id="content"></div> <div id="foot">
        <div id="copyright">Footer</div>
        <div id="username"></div>
    </div>
    </div>            

</div>
于 2012-08-08T10:53:07.917 に答える