web-dev-qa-db-ja.com

幅：100％スクロールバーなし

ブラウザの幅に合わせてWebページの一部を作成しようとしています。このため、width: 100%を使用しています。問題は、スクロールバーが表示され、overflow-x: hidden;を使用できないことです。コンテンツの一部が非表示になるので、どうすれば修正できますか？

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    -webkit-user-select: text;
}
csslayoutwidthoverflow
26
Nathan Campos

position: absoluteを使用しているため、以下を使用する代わりに：

width: 100%; margin-right: 10px; margin-left: 10px

あなたは使うべきです：

left: 10px; right: 10px

これにより、要素は利用可能な全幅を使用し、左右に10pxスペースが確保されます。

31
thirtydot

#newsアイテムのmarginsを削除する必要があります

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

これが機能しない場合は、要素自体にmarginおよびpaddingを設定している可能性があります。あなたのdiv-それがあなたが使っているものなら-スタイルシートまたはベースブラウザのスタイルのいずれかにスタイルが適用されているかもしれません。それらを削除するには、マージンを0に明確に設定し、!importantも追加します。

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}
2
Jason Gennaro

絶対配置要素についても同様の問題があり、幅を100％にしたいと思いました。これは私が使用したアプローチであり、私の問題を解決しました：

box-sizing=border-box

そうでなければ、私は常に小さなコンテンツとパディングがスクロールバーを超えて押していました。

1
Michael Sefranek

幅を100％に設定しているようですが、幅を強制的に広げる余白もあります。

「cssフレキシブル（2つまたは3つの列）レイアウト」のグーグルを試してください。

ここに例があります

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

そしてCSS

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

#menu div、左揃えになり、静的幅は200px。 #main div、以下で「開始」します#main、しかしそれのために200px padding（マージンにすることもできます）そのコンテンツと子要素が開始されます-#menu終了します。

#mainからパーセント幅（たとえば、100%）200ピクセルの左パディングが追加され、X軸にスクロールバーを追加してレイアウトを壊すためです。

1
Pantelis

答えは、divを100％より広くするマージンセットがあることです。したがって、スクロールバーです。

マージンを取り除くことができる場合は、それを実行してください！ただし、多くの場合、マージンが必要になります。この場合、すべてをコンテナーdivでラップし、マージンを0に設定し、幅を100％にします。

0
natedavisolds