मैं अपनी वेबसाइट को कोलाज साक्षात्कार के लिए तैयार करने की कोशिश कर रहा हूं, और यह लगभग समाप्त हो गया है, लेकिन मैं यह पता नहीं लगा सकता कि मेरा पाद लेख मेरे पृष्ठ के नीचे से ऊपर क्यों तैर रहा है यदि विंडोज़ का आकार एक निश्चित आकार से ऊपर है।

मैं यहां इस्तेमाल किए गए HTML और CSS को शामिल करूंगा:

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

body{
    background-color: white;
    color: rgb(85, 85, 85);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
}

.clr{
    clear: both;
}

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

#navbar .container{
    margin: 0;
}

.button{
    background-color: rgb(51, 51, 51);
    color: white;    
}

.button:hover{
    background-color: green;
}

#myHeader{
    background-color: green;
    color: white;
}

#myHeader .container{
    width: 90%;
}

#navbar{
    background-color: rgb(51, 51, 51);
    color: white;
    
}

#navbar ul{
    padding: 0;
    list-style: none;
}

#navbar li{
    display: inline;
}

#navbar a{
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 15px;

}

#showcase{
    background-image: url("../Images/showcase.jpg");
    background-position: center right;
    background-size: 100% 100%;
    color: white;
    min-height: 300px;
    margin-bottom: 30px;
    text-align: center;
}

#showcase h1{
    color: white;
    font-size: 50px;
    line-height: 1.6em;
    padding-top: 30px;
}

#main{
    float: left;
    width: 70%;
    padding:0 30px;
    box-sizing: border-box;
}

#sidebar{
    float: right;
    width: 30%;
    background: rgb(51, 51, 51);
    color: white;
    padding:0 30px;
    box-sizing: border-box;
}

#mainFooter{
    background: rgb(51, 51, 51);
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

@media(max-width: 600px){

    #main{
        width: 100%;
        float: none;
    }
    
    #sidebar{
        width: 100%;
        float: none;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Finn Llewellyn</title>
        <link rel="stylesheet" type="text/css" href="CSS/style.css">
    </head>
    <body>
        <header id="myHeader">
            <div class="container">
                <h1>Finn Llewellyn</h1>
            </div>
        </header>

        <nav id="navbar">
            <div class="container">
                <ul>
                    <li><a class="button" href="#">Contact</a></li>
                    <li><a class="button" href="#">Projects</a></li>
                    <li><a class="button" href="#">Cool Things</a></li>
                    <li>Note: These don't do anyting yet lol</li>
                </ul>
            </div>
        </nav>

        <section id="showcase">
            <div class="container">
                <h1>Computers are cool lol</h1>
                <h2>That's why this site is awful on mobile</h2>
            </div>
        </section>

        <div class="container">
            <section id="main">
                <h1>About Me</h1>
                <p>
                    My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and 
                    which spec components will best suit a specific use case. I also like to think I'm alright at diagnosing and solving technical issues. Staying
                    true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn
                    a real, spoken language, like Spanish. Hopefully i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science,
                    Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a 
                    B-Tech in softwar/app development.
                </p>
            </section>
            <aside id="sidebar">
                <h1>Cool Things</h1>
                <ol>
                    <li>Star Wars</li>
                    <li>Half-Life series</li>
                    <li>DOOM</li>
                    <li>Radiohead</li>
                    <li>Blur</li>
                    <li>R.E.M</li>
                    <li>YouTube</li>
                    <li>AMD Ryzen CPUs</li>
                    <li>Other geeky stuff</li>
                </ol>
            </aside>
        </div>

        <div id="mainFooter">
            <p>This footer is just here to look nice</p>
        </div>
    </body>
</html>

मैंने पहले ही पाद लेख वर्ग में position: absolute;, width: 100%; और bottom: 0; जोड़ने का प्रयास किया है, लेकिन अगर यह पृष्ठ से बहुत नीचे तक पहुंच जाता है तो यह सामग्री को कवर करेगा।

मैं बिल्कुल किसी भी मदद की सराहना करता हूं।

2
Finn Llewellyn 21 जिंदा 2020, 23:58

3 जवाब

सबसे बढ़िया उत्तर

क्या आप यह कोशिश कर सकते हैं? मैंने अभी एक अतिरिक्त कंटेनर जोड़ा है और इसकी न्यूनतम ऊंचाई निर्धारित की है ताकि यह व्यूपोर्ट में उपलब्ध स्थान का उपयोग करे और पाद लेख को नीचे की ओर धकेले।

आगे की व्याख्या करने के लिए, आपके पृष्ठ पर 3 मुख्य खंड हैं:

  • नवार या हैडर
  • विषय
  • फ़ुटबाल

विचार यह है कि सामग्री को आपकी स्क्रीन जितना लंबा बनाया जाए ताकि पाद लेख स्क्रीन के निचले किनारे से ऊपर न हो। तो आप केवल एक कंटेनर बना सकते हैं जहां आपकी सभी सामग्री के अनुभाग होंगे, और कुछ सीएसएस जोड़कर इसे सभी उपलब्ध ऊंचाई का उपयोग करने के लिए जोड़ सकते हैं।

तब मैंने जो किया वह main-container div बना रहा था, और फिर एक एकल CSS नियम जोड़ रहा था:

.main-container: {min-height: calc(100vh - 221px)}

मैं calc() फ़ंक्शन का उपयोग करता हूं ताकि अंतिम आकार पर मेरा थोड़ा अधिक नियंत्रण हो सके, इस मामले में, 221px आपके पाद लेख की कुल ऊंचाई + नेवबार की कुल ऊंचाई का योग है (आप प्रत्येक तत्व का निरीक्षण करके इसकी पुष्टि कर सकते हैं) ), तो अब .main-containr में आपकी कुल स्क्रीन की न्यूनतम ऊंचाई पाद और नावबार द्वारा उपयोग किए जाने वाले स्थान को घटा देगी, इस तरह, यदि आपके पास स्क्रीन पर बहुत कम सामग्री है, तो पाद लेख अभी भी निचले किनारे पर होगा क्योंकि मुख्य कंटेनर उस स्थान का उपयोग कर रहा है।

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

/*
  Target the element that holds all your content, and set a minimum height so it uses the full viewport height (100vh)
  
*/

.main-content {
  min-height: calc(100vh - 221px)
}

body {
  background-color: white;
  color: rgb(85, 85, 85);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  margin: 0;
}

.clr {
  clear: both;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

#navbar .container {
  margin: 0;
}

.button {
  background-color: rgb(51, 51, 51);
  color: white;
}

.button:hover {
  background-color: green;
}

#myHeader {
  background-color: green;
  color: white;
}

#myHeader .container {
  width: 90%;
}

#navbar {
  background-color: rgb(51, 51, 51);
  color: white;
}

#navbar ul {
  padding: 0;
  list-style: none;
}

#navbar li {
  display: inline;
}

#navbar a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 15px;
}

#showcase {
  background-image: url("../Images/showcase.jpg");
  background-position: center right;
  background-size: 100% 100%;
  color: white;
  min-height: 300px;
  margin-bottom: 30px;
  text-align: center;
}

#showcase h1 {
  color: white;
  font-size: 50px;
  line-height: 1.6em;
  padding-top: 30px;
}

#main {
  float: left;
  width: 70%;
  padding: 0 30px;
  box-sizing: border-box;
}

#sidebar {
  float: right;
  width: 30%;
  background: rgb(51, 51, 51);
  color: white;
  padding: 0 30px;
  box-sizing: border-box;
}

#mainFooter {
  background: rgb(51, 51, 51);
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}

@media(max-width: 600px) {
  #main {
    width: 100%;
    float: none;
  }
  #sidebar {
    width: 100%;
    float: none;
  }
}
<body>
  <header id="myHeader">
    <div class="container">
      <h1>Finn Llewellyn</h1>
    </div>
  </header>

  <nav id="navbar">
    <div class="container">
      <ul>
        <li><a class="button" href="#">Contact</a></li>
        <li><a class="button" href="#">Projects</a></li>
        <li><a class="button" href="#">Cool Things</a></li>
        <li>Note: These don't do anyting yet lol</li>
      </ul>
    </div>
  </nav>
  
  <!-- Group all of your content inside a single container, not including the navbar and the footer -->
  <div class="main-content">
    <section id="showcase">
      <div class="container">
        <h1>Computers are cool lol</h1>
        <h2>That's why this site is awful on mobile</h2>
      </div>
    </section>

    <div class="container">
      <section id="main">
        <h1>About Me</h1>
        <p>
          My name is Finn Llewellyn. I'm a tech enthusiast that has been following PC and mobile hardware for a while. I know far too much about computers, how they work, and which spec components will best suit a specific use case. I also like to think I'm alright
          at diagnosing and solving technical issues. Staying true to my other geeky attributes, I'm fluent in python, which is quite useful I suppose, although it would potentially be more useful to learn a real, spoken language, like Spanish. Hopefully
          i can scrape a good GCSE in it, along with my Maths, English, Double Science, Computer Science, Resistant Materials and History GCSEs. Especially Maths, Scince and Computer Scinece, as I wish to continue these subjects at A-Level, or maybe a
          B-Tech in softwar/app development.
        </p>
      </section>
      <aside id="sidebar">
        <h1>Cool Things</h1>
        <ol>
          <li>Star Wars</li>
          <li>Half-Life series</li>
          <li>DOOM</li>
          <li>Radiohead</li>
          <li>Blur</li>
          <li>R.E.M</li>
          <li>YouTube</li>
          <li>AMD Ryzen CPUs</li>
          <li>Other geeky stuff</li>
        </ol>
      </aside>
    </div>
  </div>

  <div id="mainFooter">
    <p>This footer is just here to look nice</p>
  </div>
2
IvanS95 28 जिंदा 2020, 01:52

पाद लेख के नीचे की जगह का कारण यह है कि सामग्री अब सभी उपलब्ध स्थान नहीं लेती है, और अब कोई स्क्रॉल करने योग्य सामग्री नहीं है। आप केवल सामग्री, सफेद स्थान आदि की मात्रा बढ़ा सकते हैं ताकि सामग्री कम से कम बड़ी स्क्रीन पर व्यूपोर्ट की ऊंचाई तक ले जाए।

0
Richard Lovell 22 जिंदा 2020, 00:15

अपने #mainFooter एलीमेंट में position: relative और bottom: 0 लगाने के बारे में क्या?

absolute स्थिति के बजाय relative का उपयोग करने से पाद लेख को अन्य सामग्री को कवर करने से रोकना चाहिए।

#mainFooter{
    position: relative;
    bottom: 0;
    /* other styling properties like color etc... */
}
1
Anis R. 22 जिंदा 2020, 00:01