अंत में अर्थपूर्ण यूआई पाद लेख

Question

मैं अपनी परियोजना में अर्थात् यूआई का उपयोग कर रहा हूं। मैंने एक इंडेक्स पेज बनाया है, सबकुछ तत्वों (navbar, footer, आदि) के साथ ठीक काम करता है।

अब मैं एक साइनअप पेज dev लेकिन पाद लेख पृष्ठ के अंत तक नहीं जाता है, मैं क्या कर सकता हूं?

पाद कोड:

<div class="ui inverted vertical footer segment"> 
    <div class="ui container"> 
     Travel Match 2015. All Rights Reserved 
    </div> 
</div> 

नोट: मैं पाद लेख में किसी भी सीएसएस नियम (अभी तक), केवल लोगों को अर्थ-ui से जोड़ा नहीं है

अद्यतन: नेविबार कोड:

<div class="ui inverted segment"> 
    <div class="ui container"> 
     <div class="ui inverted secondary menu"> 
      <div class="item"> 
       <i class="plane icon app-icon"></i> 
      </div> 
       <div class="right item"> 
        <a href="/signup">Signup</a> 
       </div> 
     </div> 
    </div> 
</div> 

प्रपत्र कोड:

<form class="ui large form container"> 
     <div class="ui stacked segment"> 
      <div class="field"> 
       <div class="ui left icon input"> 
        <i class="user icon"></i> 
        <input type="text" name="email" placeholder="E-mail address"> 
       </div> 
      </div> 
      <div class="field"> 
       <div class="ui left icon input"> 
        <i class="lock icon"></i> 
        <input type="password" name="password" placeholder="Password"> 
       </div> 
      </div> 
      <div class="ui fluid large teal submit button">Login</div> 
     </div> 
     <div class="ui error message"></div> 
    </form> 
    <div class="striped"></div> 

Answer 1

आप absolute स्थिति कोशिश कर सकते हैं के बाद से अपनी सामग्री Semantic-ui docs में अनुभाग से छोटा है।

सीएसएस नियम लागू करने के लिए min-height का उपयोग करें क्योंकि फूटर कुछ ऊंचाई सीमा पर नीचे रखा गया है और इस प्रकार सामग्री पर किसी भी ओवरलैप से परहेज करता है।

@media (min-height: 320px) { 
 
    .ui.footer.form-page { /* Increased specificity for SO snippet priority */ 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.8/semantic.min.css" rel="stylesheet" /> 
 
<div class="wrapper"> 
 
    <div class="ui inverted segment"> 
 
    <div class="ui container"> 
 
     <div class="ui inverted secondary menu"> 
 
     <div class="item"> 
 
      <i class="plane icon app-icon"></i> 
 
     </div> 
 
     <div class="right item"> 
 
      <a href="/signup">Signup</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <form class="ui large form container"> 
 
    <div class="ui stacked segment"> 
 
     <div class="field"> 
 
     <div class="ui left icon input"> 
 
      <i class="user icon"></i> 
 
      <input type="text" name="email" placeholder="E-mail address"> 
 
     </div> 
 
     </div> 
 
     <div class="field"> 
 
     <div class="ui left icon input"> 
 
      <i class="lock icon"></i> 
 
      <input type="password" name="password" placeholder="Password"> 
 
     </div> 
 
     </div> 
 
     <div class="ui fluid large teal submit button">Login</div> 
 
    </div> 
 
    <div class="ui error message"></div> 
 
    </form> 
 
    <div class="striped"></div> 
 
</div> 
 
<div class="ui inverted vertical footer segment form-page"> 
 
    <div class="ui container"> 
 
    Travel Match 2015. All Rights Reserved 
 
    </div> 
 
</div>