1

これはstackoverflowに関する私の最初の投稿です（私に簡単に行ってください）これは長く、説明の行き届いた投稿かもしれません。私を許してください、私は私の言葉を簡単に伝えるのが得意ではありませんでした。

基本的に、私のページには5つのdivが含まれています...

  • #wrap-他のすべての要素が含まれています
  • #header-ヘッダー
  • #main-これには#imgcontdivが含まれます
  • #imgcont-これには画像が含まれています
  • #footer-フッター

これで、#footerサイズを変更しても、ページの下部にロックされます。これは私が維持する必要のある機能です。これ#imgcontは、垂直方向と水平方向の両方に位置合わせする必要があるdivです。基本的に、サイズを変更したとき#headerに、ページの中央でオーバーラップまたはアンダーラップせずに「フロート」する必要があります。#footer

私が抱えている問題は、とをオーバーラップまたはアンダーラップさせずに、divをdiv内#imgcontで垂直に整列させることです。私がその瞬間に使用しているコードは次のとおりです。#main#header#footer

html, body {height: 100%;}
#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 100px;
}  /* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear: both;
    background-color: #999;
} 
#header {
    height: 100px;
    background-color: #999;
}

/*Opera Fix*/
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}
#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
}

明らかに、これは私の水平方向にのみ整列#imgcontしますが、ウィンドウがフルサイズまたは高さよりも大きい場合に効果を機能させるコードをインターネット上で見つけました#imgcont...

#imgcont {
    width: 1000px;
    height: 300px;
    background-color: #FC3;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

...しかし、ウィンドウを小さくすると、#imgcontがオーバーラップし始め#header、アンダーラップし始め#footerます。

#imgcontヘッダーとフッターが出会ったときに「ロック」して、水平方向に揃える必要があります。

誰かが私の髪を引っ張って、洞察を与えてくれますか？:(

私はそれを自分でほとんど理解していないので、あなたが理解できるようにこれを十分に説明したことを願っています！

よろしくお願いします、ボブ

4

1 に答える 1

0

ボディの高さと幅を固定する必要があります。

.body {   
height: 900px;
width: 1000px;
 }
于 2013-01-16T11:17:49.913 に答える