1

したがって、私の Web サイトhttp://dealminion.comには 100% に設定されたヘッダーがあります。ただし、ブラウザ ウィンドウのサイズを変更して右にスクロールすると、ヘッダーは停止しますが、ページは続行します。とても奇妙です。サイトにアクセスしてウィンドウのサイズを変更すると、私が言っていることがわかります。CSSは次のとおりです。

#header-intro { 
width: 100%; 
position: absolute; 
height: 600px; 
padding-top: 25px;
background-color: #657b90;
border-bottom: 1px solid #000000;
-moz-box-shadow: 0 5px 2px -2px #777777;
-webkit-box-shadow: 0 5px 2px -2px #777777;
box-shadow: 0 5px 2px -2px #777777;
behavior: url('pie.htc');
}

および本体のCSS：

html, body { 
margin: 0; 
padding: 0; 
height: 100%;
width: 100%;
background: #f8f8f8;
}

これが起こっている理由はありますか？

4

2 に答える 2

0

それは、とを含む#info要素を含むように拡大width: 100%しpadding: 10px、事実上20pxのオーバーフローしたコンテンツを引き起こします。

はブロックレベルの要素であるため#info、幅を100％に設定する必要はありません。設定するだけwidth: autoで（またはまったく設定しないで）、オーバーフローを発生させることなく、使用可能なスペースを埋め、パディング、境界線、およびマージンを考慮に入れます。

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    width: auto; /* changed to auto */
}

アップデート：

私はあなたが成し遂げようとしていることをよりよく理解しています。

絶対配置なので幅が崩れます。その要素の幅を明示的に設定する代わりに、とを使用して暗黙的に設定しleftますright。

#info {
    position: absolute;
    z-index: 999;
    background: #314455;
    padding: 10px;
    height: auto;
    left: 0;
    right: 0;
}
于 2012-02-10T15:32:45.870 に答える