2017-10-17 7 views
0

Je veux que le div #intro ait 90% de la hauteur de la fenêtre. Mais quand je mets ça en css ça bousille la grille. Quand je minimise la pile de la fenêtre du navigateur "À propos de moi" et couvre "Ce que je fais" partie et trois colonnes inférieures. Cependant, lorsque je supprime les paramètres de hauteur de css everthing fonctionne très bien. Est-ce qu'il y a de toute façon pour faire row1 90% de hauteur et ne pas rompre la sensibilité?Les paramètres de hauteur de départ du bootstrap cassent la grille

Voici mon code CSS: https://jsfiddle.net/yjakg7rL/

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <title>Test resume page</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!--Boostrap_css--> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 

    <!--Bootstrap_js--> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 

    <!--custom CSS--> 
    <link rel="stylesheet" type="text/css" href="style.css" > 
    </head> 

<body> 

    <div id="intro" class="container-fluid"> 
     <div class="row row1"> 

      <div class="col-md-4 column1"> 
       <img src="dva.jpg" class="rounded-circle img-responsive dva" alt="Gamer-grill" width="200" height="200"> 
       <h3>Name/surname</h3> 
       <p>MEKA pilot. Top trash tier web dev</p> 
      </div> 


      <div class="col-md-8 column2"> 
       <h3>About me</h3> 
       <p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
      </div> 

     </div> 
    </div>  



    <div class="container-fluid"> 

      <h3>What I do?</h3> 
      <p> I'm eating ults. Omnomnomnomn. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 

    </div> 

    <div class="row exp"> 

      <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
      </div> 

      <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
      </div> 

      <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
      </div> 
    </div> 


</body> 
</html> 

Répondre

0

Pourquoi avez-vous besoin une hauteur de 100%? Je pense que c'est ce qui brise votre code. De plus, votre structure bootstrap n'est pas correcte. Découvrez le code ci-dessous.

html, body { 
 
\t 
 
\t height: 100%; 
 
} 
 

 
#intro { 
 
\t 
 
\t height: 100%; 
 
\t 
 
} 
 

 
.row1 { 
 
\t 
 
\t height: inherit; 
 

 
} 
 

 
.column1 { 
 
\t 
 
\t background-color: #23af4b; 
 
\t 
 
} 
 

 
.column2 { 
 

 
\t background-color: #eef2d0; 
 
    \t 
 
} 
 

 

 
.exp { 
 
\t 
 
\t background-color: #eef2d0 
 
\t 
 
} 
 

 

 
.dva { 
 
\t 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t 
 
}
<!DOCTYPE html> 
 
<html lang="pl"> 
 
<head> 
 
    <title>Test resume page</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <!--Boostrap_css--> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
    <!--Bootstrap_js--> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
    
 
    <!--custom CSS--> 
 
    <link rel="stylesheet" type="text/css" href="style.css" > 
 
    </head> 
 
    
 
<body> 
 

 
\t <div id="intro" class="container-fluid"> 
 
\t \t <div class="row row1"> 
 
\t \t \t 
 
\t \t \t <div class="col-md-4 column1"> 
 
\t \t \t \t <img src="dva.jpg" class="rounded-circle img-responsive dva" alt="Gamer-grill" width="200" height="200"> 
 
\t \t \t \t <h3>Name/surname</h3> 
 
\t \t \t \t <p>MEKA pilot. Top trash tier web dev</p> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t <div class="col-md-8 column2"> 
 
\t \t \t \t <h3>About me</h3> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
 
\t \t \t </div> 
 
\t \t \t \t 
 
\t \t </div> 
 
\t </div> \t \t 
 
\t \t 
 
\t 
 
\t \t 
 
\t <div class="container-fluid"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12"> 
 
\t \t \t \t <h3>What I do?</h3> 
 
\t \t \t \t <p> I'm eating ults. Omnomnomnomn. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t \t 
 

 
\t \t 
 
\t <div class="row exp"> 
 
\t \t \t 
 
\t \t \t <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="col-lg"><p>Lorem ipsum dolor sit amet tempor ac, urna. Aenean congue risus commodo ligula sed nulla. Suspendisse rhoncus a, elementum eleifend, ligula. Vivamus eget tellus. Praesent quis mauris. Mauris interdum viverra. Ut id turpis nec ligula porttitor auctor, sapien eget augue quam eu risus. Suspendisse potenti. Quisque urna. Sed at sapien. Aenean tincidunt wisi augue nec urna felis, malesuada elit laoreet enim. Aliquam eget orci luctus et lacus et netus et lacus euismod orci luctus et magnis dis parturient montes, nascetur ridiculus mus. Nunc sapien. Morbi nisl dui quis wisi. Morbi fermentum suscipit id, libero. Morbi risus at nibh. Morbi ultrices.</p> 
 
\t \t \t </div> 
 
\t </div> 
 
\t \t 
 
\t </div> 
 

 
\t 
 
</body> 
 
</html>