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>