9

これはcss私のdivです。背景が画面全体に表示されることを期待していますが、画面の解像度よりも大きいため、下部のスクロールバーが表示されます

.hero-unit {
  padding:60px;
  margin-top: 60px;
  background: url("../img/bar2.jpg") no-repeat scroll 0;
  height:233px;
  width:100%;
  left:0px;
  background-size: cover;
  position:absolute;
  background-color:#eeeeee;
}
4

5 に答える 5

9

ボックスサイジングを使用できます

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;

これにより、パディング、マージン、または境界線を追加しても、幅には影響しません。(これは IE7 以下では動作しません)

于 2012-10-01T17:39:10.113 に答える
2

すでに100%の幅にパディングを追加しています。

(パーセンテージを使用している場合)行う必要があるのは、パディングをパーセンテージに変更し、合計を100パーセントにすることです。

例えば:

padding:5%;
width:90%;

また、overflow:hiddenを使用してスクロールバーを削除する別の方法も見つけました。ただし、パディングはウィンドウからオーバーフローしますが、目に見えないため、これで問題が解決することはありません。

html, body
{
    width:100%;
}

body
{
    overflow:hidden;
}

ここでjsfiddleを参照してください。

于 2012-10-01T17:16:28.913 に答える
0

padding必要に応じて削除してから減らしwidthます。

次のようなパーセンテージでそれらを維持するようにしてください

padding:5%; /*desired value*/
width:80%; /*desired value*/

それらが追加されるとき、それは100%以下でなければなりません。あなたがmarginそれを持っているなら、それも考慮してください。(仮定margin:5%;

例えば:

<----------------100%---------------->
  margin | padding|   div   |padding | margin
|<--5%-->|<--5%-->|<--80%-->|<--5%-->|<--5%-->| 

これは、水平(幅)または垂直(高さ)の調整でも同じです。

于 2012-10-01T17:15:43.047 に答える
0

これは、ボディのマージンとパディングが原因である可能性があります。

このブロックを体に追加して、効果があるかどうかを確認します。

body {
  margin: 0;
  padding: 0;
}

さらに、すでに100%の要素にパディングを定義し、ボディよりも大きくします。

于 2012-10-01T17:17:08.053 に答える