1. 程式人生 > >元素width:100%; 設置padding出現橫向滾動條的問題

元素width:100%; 設置padding出現橫向滾動條的問題

width

當我們給塊元素設置寬度為100%,然後再設置padding值想讓裏面的內容有一定的內邊距時,會發現此時內邊距的效果達到了,但是卻出現了橫向滾動條,

原因:padding 是邊框和裏面內容之間的間隙,如果你設置了padding,padding的值是不變的,當內容+padding大於容器時,它會以容器的左上角為中心,保持padding的距離向外擴展,因此出現了滾動條,正常解決辦法是,將元素寬度減去padding值的2倍,但是現在元素寬度值並不是具體的px值,而是百分數,

這種情況下解決辦法有兩種:
1.最簡單的辦法是去掉元素寬度值設置,width:100%,塊級元素默認就是100%寬度,設置padding後,padding會被計算為寬,實際效果的寬度會自適應的調整為100%。

2.利用css3新特性給父級設置box-sizing:border-box; 此時元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制,元素設定的寬度和高度會自動減去邊框和內邊距得到內容的寬度和高度。

元素width:100%; 設置padding出現橫向滾動條的問題