1

div に問題があります。投稿が配置されると（ワードプレスのテーマ）、子divが下から邪魔されることなく伸びるコンテンツの親ダイブを作成しようとしています。これの鍵は親divを絶対にすることであることがわかりましたが、これは別の問題を引き起こします。問題は、コンテンツ div が伸びるにつれて移動する、相対的に配置されたフッターも必要だということです。だから私がしようとしているのは、「伸縮性のある」コンテンツ div と相対的に配置されたフッターを同時に持つ方法です。これが私のcssです：

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#content{height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}

私が言ったように、私はすでに相対的な位置付けを試みましたが、それは私の好みではうまくいきませんでした. また、「スティッキーフッター」メソッドも試しました。これは、大きな解像度の画面では正常に機能しますが、小さな解像度の画面ではコンテンツ div (z-index に応じて) の前または後ろに表示されます。また、可能であればJSを利用したくないです。どんな助けでも大歓迎です！ここにコードを入力してください

4

1 に答える 1

1
  • コンテンツでオーバーフローを auto に設定し、
  • コンテンツの高さを min-height に変更し、
  • 幸福のために、絶対要素を相対 div でラップします。

これは、それを示す jsfiddle です: http://jsfiddle.net/mAhet/

HTML

<html>
<body>
    <div id="wrapper">
        <div id="content">
            <div style="position:relative; width:100%; height:100%;">
             <div class="post">lasa sf </div>
             <div class="post"> asd asd as</div>
             <div class="post"> asd a dsadda das</div>
        </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>​

CSS

body{height: 100%; 
margin: 0;
padding: 0;
} 
#wrapper{width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
position:relative;
}
#content{

min-height: 35em;
width: 30em:
position: absolute;
padding: .62em;
margin: 5em;
overflow:auto;
}
.post{width: 12em;
height: 12em;
margin: 1em;
float: left;
}
#footer{position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 1em 0 0;
}​

これが実際の動作を示す jsfiddle です: http://jsfiddle.net/mAhet/

于 2012-09-08T07:10:28.503 に答える