在重新调整浏览器大小时，div元素会相互重叠。
html文件位于以下网址： - 请帮忙。 http://codepen.io/SanjeetSk/pen/ZQBBaz
请不要建议min-width和overflow隐藏类型的答案。 我正在寻找与此页面相关的真正解决方案，而不是解决方法。这就是为什么这篇文章中存在codepen链接。 再来一次 http://codepen.io/SanjeetSk/pen/ZQBBaz
.home-area, .work-area, .contact-area {
padding: 80px 20px 80px 20px;
position: relative;
height: 100vh;
/* overflow: hidden; */
}
.navbar-toggle{
width: 42px;
height: 38px;
float: right;
margin-top: 10px;
}
.navbar-toggle * {
-ms-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar-toggle span {
width: 20px;
height: 2px;
margin-bottom: 3px;
background-color: green;
display: block;
}
/* Codepen styling, not required for use */
.navbar-toggle span.bar1 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform-origin: 1px 3px;
-webkit-transform-origin: 1px 3px;
-moz-transform-origin: 1px 3px;
-o-transform-origin: 1px 3px;
transform-origin: 1px 3px;
width: 24px;
}
.navbar-toggle span.bar2 {
-ms-transform: rotate(-360deg) scale(0);
-webkit-transform: rotate(-360deg) scale(0);
-moz-transform: rotate(-360deg) scale(0);
-o-transform: rotate(-360deg) scale(0);
transform: rotate(-360deg) scale(0);
}
.navbar-toggle span.bar3 {
-ms-transform: rotate(360deg) scale(0);
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
}
.navbar-toggle span.bar4 {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform-origin: 2px 0px;
-webkit-transform-origin: 2px 0px;
transform-origin: 2px 0px;
width: 24px;
}
.navbar-toggle.collapsed span.bar1,
.navbar-toggle.collapsed span.bar2,
.navbar-toggle.collapsed span.bar3,
.navbar-toggle.collapsed span.bar4 {
-ms-transform: none;
-webkit-transform: none;
transform: none;
width: 20px;
}
.footer{
height: 50px;
background-color: #ffc04c;
}
.copyright{
padding-top: 10px
}<html lang="en">
<html>
<head>
<!-- Designed and Developed by DigitalSrishti inc -->
<!-- DigitalSrishti :- Your Digital partner for sustainable future -->
<title>My Portfolio</title>
</head>
<body data-spy="scroll" data-target="#navbar">
<div class="navbar navbar-default navbar-fixed-top bs-dos-nav " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-toggle collapsed target" data-toggle="collapse" data-target="#navbar" id="rotate">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
</div>
<a href="#" class="navbar-brand">Your Logo</a>
</div>
<nav id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right main-navigation text-uppercase ">
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#resume">Resume</a></li>
<li class="disabled"><a href="#social">Social</a></li>
</ul>
</nav>
</div>
</div>
<!-- <a href = "_http://themes.getbootstrap.com/products/application"> click here I liked the friends and enemy :-) profile</a> -->
<!-- Start Home -->
<div id="home">
<div class="home-area">
<div class="container">
<h1><strong>Sanjeet Shukla</strong></h1>
<p>Have a look at some <strong>Works</strong> I have done so far, it <strong>BI Designer</strong> creating modern and responsive reports for <strong>Web</strong> and <strong>Mobile</strong>. You can view my<strong>Profile</strong> and <strong>resume</strong> and also find a link to become my friend or enemy on social sites, it is cool.. right?</br> Let us work together. Thank you.</p>
<a href="#work" class="btn btn-default">Let's Begin</a>
</div>
</div>
</div>
<!-- End Home -->
<!-- Start Work -->
<div id="work">
<div class="work-area">
<div class="container">
<h1>My <strong>Work</strong></h1> Have a look at some of my <strong>Works</strong> It may help you choose best partner for your work ;-)
<diV class="row">
<div class="col-md-3">
<h4>Mobile Dict</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>HTML Template</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </p>
</div>
<div class="col-md-3">
<h4>tic-toe Game</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>Pathshala(ERP)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<!-- <diV class="row">
<div class="col-md-3">
<h4>Mobile Dict</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>HTML Template</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </p>
</div>
<div class="col-md-3">
<h4>tic-toe Game</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>Pathshala(ERP)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div> -->
</div>
</div>
</div>
<!-- End Work -->
<!-- Start Contact -->
<div id="contact">
<div class="contact-area">
<div class="container">
<h1>Contact <strong>Me</strong></h1>
</div>
</div>
</div>
<!--End Contact-->
<div class="footer navbar-fixed-bottom" id="footer" align="center">
<div class="copyright p">© 2016 <a href="www.sanjeetshukla.me">Sanjeet Shukla</a></div>
</div>
</body>
</html>
答案 0 :(得分：2)
您将-area div的高度设置为浏览器窗口的100％，并且在浏览器调整大小时文本不再适合指定的容器大小：
.home-area, .work-area, .contact-area {
...
height: 100vh;
...
}
如果需要，请使用min-height: 100vh扩展过去的容器高度。