ट्विटर बूटस्ट्रैप

के साथ पूर्ण शरीर पृष्ठभूमि मैं ट्विटर के बूटस्ट्रैप ढांचे का उपयोग कर एक नई परियोजना पर काम करने की कोशिश कर रहा हूं, लेकिन मुझे कोई समस्या है। मुझे एक पूर्ण शरीर की पृष्ठभूमि चाहिए, फिर भी पृष्ठभूमि कंटेनर div की ऊंचाई तक ही सीमित है। यहां एचटीएमएल/सीएसएस कोड है:ट्विटर बूटस्ट्रैप

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='UTF-8'> 
     <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> 
     <title>Bootstrap Issue</title> 
     <style> 
      body { background: black; } 
      .container { background: white; } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <h1> Hello, World!</h1> 
     </div> 
    </body> 

</html>

मैं पूरी स्क्रीन लेने के लिए शरीर को कैसे प्राप्त कर सकता हूं?

स्रोत

2011-09-27 GSto

आप या तो इस जोड़ने की जरूरत:

html { background: transparent }

या, बजाय html पर "पृष्ठ पृष्ठभूमि" (background: black) है, जो करने के लिए ठीक है निर्धारित किया है।

क्यों?

html,body{background-color:#ffffff;}

(मन में भालू डिफ़ॉल्ट background मूल्य है transparent)

यह क्यों महत्वपूर्ण है, को देखने के बारे में अधिक जानकारी के लिए:: What is the difference between applying css rules to html compared to body?

ध्यान दें कि यह लंबे समय तक एक नहीं है बूटस्ट्रैप के अंदर, वहाँ इस है बूटस्ट्रैप 3+ के साथ समस्या।

स्रोत

2011-09-27 13:14:49 thirtydot

संभवतः, वह पहले से ही पृष्ठभूमि के लिए बूटस्ट्रैप्स रंग को ओवरराइड कर रहा है। –

@EvanCarroll: हाँ वह था, लेकिन यह उसके लिए काम नहीं कर रहा था। आप इस सवाल के बारे में पूछ रहे समस्या को समझ नहीं रहे हैं। – thirtydot

सीएसएस में एचटीएमएल और बॉडी की ऊंचाई 100% निर्धारित करें।

html, body { height: 100%; }

फिर इसे काम करना चाहिए। समस्या यह है कि पूरे स्क्रीन की ऊंचाई के बजाय शरीर की ऊंचाई स्वचालित रूप से सामग्री की ऊंचाई होने के लिए गणना की जाती है।

स्रोत

2011-09-27 12:18:08

यह लगभग काम करता है, लेकिन यदि आपके पास पैडिंग-टॉप है: 60 पीएक्स (नेविबार को शीर्ष पर कंटेनर पर दिखाई देने से रोकने के लिए), यह नीचे 60px अतिरिक्त ऊंचाई बनाता है, जो प्राप्त नहीं करता है पृष्ठभूमि। हम सीएसएस में "100% -60 पीएक्स" कैसे करते हैं? – aalaap

संपादित करें: यह jQuery - $ ("body") का उपयोग करने योग्य है। सीएसएस ("ऊंचाई", ($ (विंडो)। हाइट() - 60) + "पीएक्स"); क्या किसी को यह हासिल करने के लिए शुद्ध-सीएसएस विधि है? – aalaap

एचटीएमएल, शरीर { ऊंचाई: 100%;/* यह सुनिश्चित करता है कि यह पहला है */ न्यूनतम ऊंचाई: 100%; } – DrewRobertson93

/यहाँ * एक शुद्ध सीएसएस समाधान है */

<style type="text/css"> 
     html, body { 
     height: 100%; 
     width: 100%; 
     padding: 0; 
     margin: 0; 
     } 

     #full-screen-background-image { 
     z-index: -999; 
     min-height: 100%; 
     min-width: 1024px; 
     width: 100%; 
     height: auto; 
     position: fixed; 
     top: 0; 
     left: 0; 
     } 

     #wrapper { 
     position: relative; 
     width: 800px; 
     min-height: 400px; 
     margin: 100px auto; 
     color: #333; 
     } 

     a:link, a:visited, a:hover { 
     color: #333; 
     font-style: italic; 
     } 

     a.to-top:link, 
     a.to-top:visited, 
     a.to-top:hover { 
     margin-top: 1000px; 
     display: block; 
     font-weight: bold; 
     padding-bottom: 30px; 
     font-size: 30px; 
     } 

    </style> 
    <body> 
    <img src="/background.jpg" id="full-screen-background-image" /> 
    <div id="wrapper"> 
    <p>Content goes here...</p> 
    </div> 
</body>

स्रोत

2013-06-07 02:33:17

यह मेरे लिए काम करता है, धन्यवाद! – Juck

<style> 
     body { background: url(background.png); } 
     .container { background: ; } 
</style>

यह एक पृष्ठभूमि छवि के लिए काम करता है अगर आप चाहते हैं यह

स्रोत

2013-07-01 21:37:28 cflo

सबसे अच्छा समाधान

.content{ 
    background-color:red; 
    height: 100%; 
    min-height: 100vh; 
}

होगा इसकी स्वचालित रूप से बूटस्ट्रैप में veiwport ऊंचाई (vh) ले लो।

स्रोत

2015-08-03 05:49:54

ट्विटर बूटस्ट्रैप

उत्तर

संबंधित मुद्दे