Bootstrap Behälterhöhe 100% nicht

Mein Code funktioniert ist wie folgt:Bootstrap Behälterhöhe 100% nicht

xyz.scss

.menu-about { 
    display: none; 
} 

header { 
    display: none; 
} 

.container { 
    background-color: yellow; 
    width: 100%; 
    height: 100%; 
} 

#q-nav-about { 
    width: 100%; 
    height: 4rem; 
    position: fixed; 
    display: flex; 
    align-items: center; 
    top: 0; 
    background-color: white; 
    z-index: 3000; 
    .q-logo { 
     margin-left: 1rem; 
     width: 99px; 
     height: 50px; 
    } 
    ul { 
     flex: 1; 
     display: flex; 
     flex-direction: row; 
     justify-content: flex-end; 
    } 
    .q-nav-about { 
     position: relative; 
     color: #898989; 
     text-decoration: none; 
     font-size: 18px; 
     font-family: $f3; 
     padding: 0rem 2rem 0rem 2rem; 
    } 
    ul li { 
     list-style: none; 
    } 
    .q-nav-work { 
     position: relative; 
     color: #898989; 
     font-size: 18px; 
     text-decoration: none; 
     font-family: $f3; 
     padding: 0rem 2rem 0rem 2rem; 
    } 
    .q-nav-contact { 
     position: relative; 
     color: #898989; 
     text-decoration: none; 
     font-size: 18px; 
     font-family: $f3; 
     padding: 0rem 8rem 0rem 2rem; 
    } 
} 

.r-contact-container { 
    margin-top: 4rem; 
    width: 100%; 
    height: 100% !important; 
    background-color: blue; 
    .row { 
     .no-padding { 
      padding: 0 !important; 
      margin: 0 !important; 
     } 
    } 
}

xyz.html

<!DOCTYPE html> 

<html> 

<head> 
    <script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.js" async></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 
    <header> 
     <img class="mob-logo-about" src="../image/logo_logo.svg" alt="New york"> 
     <button class="hamburger">&#9776;</button> 
     <button class="cross">&#735;</button> 
    </header> 

    <div class="menu-about"> 
     <ul> 
      <a href="/template/about-us.html"> 
       <li>About us</li> 
      </a> 
      <a href="#work"> 
       <li>Products</li> 
      </a> 
      <a href="#contact-us"> 
       <li>Contact</li> 
      </a> 
     </ul> 
    </div> 


    <div id="q-nav-about"> 
     <img class="q-logo" src="../image/logo_logo.svg" alt="New york"> 
     <ul> 
      <li><a class="q-nav-about " href="/template/xyz.html">xyz</a> 
      </li> 
      <li><a class="q-nav-work" href="#abx">abx</a> 
      </li> 
      <li><a class="q-nav-contact" href="#lll">lll</a> 
      </li> 
     </ul> 
    </div> 

    <div class="container r-contact-container"> 
     <div class="row"> 
      <div class="col-sm-8 no-padding">hdbdasjhdasdhjsda</div> 
      <div class="col-sm-4 no-padding">sdcdbcjdhhddahs</div> 
     </div> 

    </div> 

</body> 

</html>

Mein Layout sieht wie folgt:

Quelle

2017-09-20 Mrugesh Thaker

Was versuchen Sie zu erreichen? – felixmosh

Ich möchte die ganze Seite eher in blauer Farbe sehen als in diesem kleinen Streifen –

Sie müssen die folgenden CSS hinzufügen:

html, body{ 
    height:100%; 
    width:100%; 
}

Dann können Sie die Höhe des r-contact-container anpassen.

.r-Kontaktbehälter { Rand oben: 4rem; Breite: 100%; Höhe: 86%! Wichtig; Hintergrundfarbe: blau; }

Diese Höhe kann eingestellt werden, ich habe gerade 86% verwendet.

JSFiddle Demo

Quelle

2017-09-20 05:12:43

Bootstrap Behälterhöhe 100% nicht

Antwort

Verwandte Themen