3

ここのレイアウトは私のウェブサイトhttp://jsfiddle.net/QvFV8/12/のテンプレートです。コンテンツがフッターからはみ出しているのがわかります。

コンテンツが少量しかない場合は問題なく機能します。これが私が望んでいることです。最初のフッターセクションで両方ともクリアしようとしましたが、これは効果がありません

コンテンツの量に関係なく、フッターが下部に残るようにページを引き伸ばすにはどうすればよいですか (一部のページでは、他のページよりもコンテンツが多かったり少なかったりします)。

<body> 
<div class="container">
    <div class="header">
        <div class="headerleft">
            <div class="headerleftcon">leftcon</div>
            </div>
        <div class="headerright">
            <div class="headerrightcon">rightcon</div>
            </div>
        <div class="header-content">Header
        </div>
    </div> 
    <div class="body">
        <div class="left-sidebar">
            <div class="left-content">left sidebar</div>
        </div>
        <div class="right-sidebar">
            <div class="right-content">right sidebar</div>
        </div>
        <div class="content">Content 1
        <div class="centerbox">
            <div class="centerboxcontent">Center box <br>  </div>
        </div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2  
        bla bla bla
        </div>
    </div> 
    <div class="footer">
        <div class="footerleft">
            <div class="footerleftcon">botleftcon</div>
            </div>
        <div class="footerright">
            <div class="footerrightcon">botrightcon</div>
            </div>
        <div class="footer-content">Footer</div>
    </div>
</div> 
</body>

cssは以下の通り

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
.headerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}
.headerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.headerrightcon{
padding: 0px 0px 0px 0px;}
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;} 
.content{
padding: 80px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: left;
clear: both;} 
.right-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: right;}
.centerbox{
height:100px;
background-color: blue;}
.centerboxcontent{
padding:  0px 0px 0px 0px;} 
.right-content{
padding:  80px 0px 0px 0px;
text-align: right;}
.left-content{
padding:  80px 0px 0px 0px;} 
.footer{
   clear:both;}
.footerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.footerleftcon{
padding: 0px 0px 0px 0px;}
.footerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.footerrightcon{
padding: 0px 0px 0px 0px;}
4

2 に答える 2

1 
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
.header, .footer {
    height: 80px;
    background-color: #EFEFEF;
}
.header-content {
    padding: 20px;
    text-align: center;
}
.headerleft {
    height: 100%;
    background-color: red;
    width: 50px;
    float: left;
}
.headerleftcon {
    padding: 0px 0px 0px 0px;
}
.headerright {
    height: 100%;
    background-color: red;
    width: 50px;
    float: right;
}
.headerrightcon {
    padding: 0px 0px 0px 0px;
}
.footer-content {
    padding: 20px;
    text-align: center;
}
.container {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.body {
    background-color: #C7DFFA;
    overflow: hidden;
    margin-bottom: -30000px;
    padding-bottom: 30000px;
}
.content {
    margin-right: 50px;
    margin-left: 50px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-bottom: 80px;
}
.left-sidebar {
    background-color: gray;
    width: 50px;
    float: left;
}
.right-sidebar {
    background-color: gray;
    width: 50px;
    float: right;
}
.left-sidebar, .right-sidebar {
    margin-bottom: -30000px;
    padding-bottom: 30000px;
}
.centerbox {
    background-color: blue;
}
.centerboxcontent {
    padding:  0px 0px 0px 0px;
}
.right-content {
    text-align: right;
}
.left-content {
}
.footer {
    clear:both;
    position: absolute;
    width: 100%;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.footerleft {
    height: 100%;
    background-color: red;
    width: 50px;
    float: left;
}
.footerleftcon {
    padding: 0px 0px 0px 0px;
}
.footerright {
    height: 100%;
    background-color: red;
    width: 50px;
    float: right;
}
.footerrightcon {
    padding: 0px 0px 0px 0px;
}
于 2013-04-16T23:12:47.880 に答える
1

ウェブサイトのフッターを取得することは他の何よりも難しいことを理解していますが、これについてあとどれだけ質問する必要があるかわかりません.CSSを学ぶための単なる呼びかけです.今ここに私が作った2つのフィドルがあります同じ質問の前に

したがって、フッターがコンテナの一番下にあることを確認する必要があります。そのためには、コンテナの位置を相対にする必要があります。およびコンテンツの 100% の高さ また、コンテナーにはフッターの高さであるパディングの下部が必要です。それは本当に

http://jsfiddle.net/eTwJh/2/そしてここにコンテンツのないものがあります - http://jsfiddle.net/eTwJh/3/

重複した質問はこちら

フッターがページの途中ではなく最後まで表示されるようにするにはどうすればよいですか?

ここにいくつかのサンプルコードがあります

  <!DOCTYPE html>
<html>
<head>
    <title>My Amazing Footer</title>
    <style>
    html, body {
       margin:0;
       padding:0;
       height:100%;
    }
    .wrapper {
       min-height:100%;
       position:relative;
    }
    footer{
        background:#F1F1F1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height:300px;
    }

    footer p{
        text-align: center;
        padding-top:100px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="Content">
            <p>HTML Ipsum Presents</p>
        </div>
        <footer>
            <p>&copy; My Website 2013. All Rights Reserved!</p>
        </footer>

    </div>
</body>
</html>
于 2013-04-16T21:48:56.047 に答える