0
我希望#intro div具有90％的窗口高度。但是當我在css中設置它時會擾亂網格。當我最小化瀏覽器窗口「關於我」部分堆棧並覆蓋「我做什麼」部分和三個較低的列。但是，當我從css everthing刪除高度設置工作正常。無論如何可以讓row1的高度達到90％並且不會破壞Responsivness？自舉div高度設置打破網格
這裏是我的代碼使用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>