मेरा div मेरी खिड़की की चौड़ाई से बड़ा है

Question

यह div का css है। मैं पृष्ठभूमि पूरे स्क्रीन को भरने की उम्मीद है, लेकिन यह अपनी स्क्रीन संकल्प से भी बड़ा है, इसलिए एक नीचे स्क्रॉल बार प्रकट

.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; 
} 

Answer 1

हटाने 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%-->| 

यह क्षैतिज (चौड़ाई) या कार्यक्षेत्र (ऊंचाई) समायोजन के लिए एक ही है।

Answer 2

आप पहले से 100% चौड़ाई में पैडिंग जोड़ रहे हैं।

आपको क्या करना है (यदि आप प्रतिशत का उपयोग कर रहे हैं) तो आपके पैडिंग को प्रतिशत होने के लिए बदल दें और इसे 100 प्रतिशत तक बढ़ा दें।

उदाहरण के लिए: स्क्रॉल पट्टी को हटाने के लिए छिपा हुआ:

padding:5%; 
width:90%; 

---

मैं भी एक विकल्प के अतिप्रवाह का उपयोग कर पाया। यह आपकी समस्या को नहीं हटाएगा हालांकि पैडिंग अभी भी विंडो को बहती रहेगी, बस स्पष्ट रूप से नहीं।

html, body 
{ 
    width:100%; 
} 

body 
{ 
    overflow:hidden; 
} 

jsfiddle here देखें।

Answer 3

यह मार्जिन और शरीर की पैडिंग के कारण हो सकता है।

आपके शरीर को यह ब्लॉक जोड़ें अगर यह मदद करता है देखने के लिए:

body { 
    margin: 0 
    padding: 0 
} 

साथ ही, आप एक पहले से ही 100% तत्व को गद्दी तय कर रहे हैं, यह शरीर की तुलना में बड़ा।

Answer 4

आप उपयोग कर सकते हैं बॉक्स आकार

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

यह ऐसा बनाता है जब आप गद्दी, मार्जिन जोड़ सकते हैं या सीमाओं यह चौड़ाई को प्रभावित नहीं करेगा। (यह आईई 7 और नीचे काम नहीं करेगा)

Answer 5

अक्सर क्षैतिज अतिप्रवाह एक तत्व के कारण होता है जिसका अस्पष्टता 0 है। आप तत्व को भी नहीं देख सकते हैं लेकिन यह क्षैतिज अतिप्रवाह होता है। सीएसएस में निम्नलिखित कोड जोड़ें।

body { 
overflow-x: hidden; 
} 
.hidden-thing { 
position: absolute; 
left: 100%; 
width: 50px; 
height: 50px; 
opacity: 0; 
}