css - working - 寬度:100%沒有滾動條




overflow遊戲 (4)

因為你使用的是position: absolute ,而不是使用:

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

你應該使用:

left: 10px; right: 10px

這將使您的元素佔據整個寬度,左側和右側有10px空間。

https://code.i-harness.com

我正在嘗試使我的網頁的一部分適合瀏覽器的寬度,為此我使用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;
}

您似乎已將寬度設置為100%,但也有一些邊距會強制寬度超出該範圍。

嘗試使用Google搜索“css flexible(two / three-collumn)佈局”。

這是一個例子,

<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軸添加滾動條來中斷佈局。


我有一個絕對定位元素的類似問題,我想使用寬度100%。 這是我使用的方法,它解決了我的問題:

box-sizing=border-box

否則我總是有一點內容和填充推過滾動條。


答案是你設置的邊距將使div寬於100%; 因此滾動條。

如果你能擺脫自己的利潤就行了! 但是,通常你會想要利潤率。 在這種情況下,將整個東西包裝在容器div中,並將邊距設置為0,寬度為100%。





overflow