更改窗口大小时html页面中的内容重叠

我上传了一个网页 问题是，当我调整浏览器窗口的大小时，内容彼此重叠我在网上看到了多篇与该主题相关的帖子，但未能找到合理的答案。我试过相对位置和我所知道的一切。如果您知道如何解决此问题，请告诉我。

CSS:

@导入url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@字符集“UTF-8”；
h1、h2、h3、h4、h5、h6、p、a、ul、ol、li、小型
{
保证金：0；
填充：0；
边界：0；
大纲：0；
字体大小：100%；
背景：透明；
}
#介绍
{
位置：相对位置；
宽度：100%；
身高：30%；
背景#566074；
最小宽度：50%；
最小高度：20%；
}
#导航
{
位置：相对位置；
宽度：100%；
身高：7%；
}
#缓冲区
{
位置：相对位置；
宽度：100%；
身高：1%；
}
/*基本样式*/
#美国海军，
#李海军,，
#导航a{
列表样式：无；
保证金：0；
填充：0；
边界：0；
线高：1；
字体系列：“Lato”，无衬线；
}
#导航{
边框：1px实心#133e40；
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
宽度：自动；
}
#导航ul{
缩放：1；
背景#36b0b6；
背景：-莫兹线性梯度（顶部，#36b0b6 0%，#2a8a8f 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#36b0b6）、颜色停止（100%，#2a8a8f））；
背景：-webkit线性梯度（顶部，#36b0b6 0%，#2a8a8f 100%）；
背景：-o-线性梯度（顶部，#36b0b6 0%，#2a8a8f 100%）；
背景：-ms线性梯度（顶部，#36b0b6 0%，#2a8a8f 100%）；
背景：线性梯度（顶部，#36b0b6 0%，#2a8a8f 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='@top color'，endColorstr='@bottom color'，GradientType=0）；
填充物：5px10px；
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
}
#海军ul：之前{
内容：''；
显示：块；
}
#海军ul：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
#李海军{
浮动：左；
边距：0 5px 0 0；
边框：1px实心透明；
}
#李娜{
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
填充：8px 15px 9px 15px；
显示：块；
文字装饰：无；
颜色：#ffffff；
边框：1px实心透明；
字体大小：16px；
}
#李海军{
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
显示：块；
背景：#1e6468；
边框：1px实心#133e40；
-moz盒阴影：插入0 5px 10px#133e40；
-webkit盒阴影：插入0 5px 10px#133e40；
盒影：插入0 5px 10px#133e40；
}
#李导航：悬停{
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
边框：1px实心#36b0b6；
}
#李导航：悬停a{
-webkit边界半径：5px；
-moz边界半径：5px；
-ms边界半径：5px；
-o-边界半径：5px；
边界半径：5px；
显示：块；
背景：#1e6468；
边框：1px实心#133e40；
-moz盒阴影：插入0 5px 10px#133e40；
-webkit盒阴影：插入0 5px 10px#133e40；
盒影：插入0 5px 10px#133e40；
}
img
{
身高：100%；
位置：相对位置；
宽度：15%；
右：2%；
浮动：左；
}
#简介p
{
颜色：白色；
字体系列：“Palatino Linotype”，“Book Antika”，Palatino，衬线；
字体大小：150%；
垫面：2%；
字体大小：粗体；
}
#缓冲区1
{
宽度：100%；
身高：1%；
位置：相对位置；
}
#内容{
位置：绝对位置；
宽度：99%；
身高：60%；
背景色：#566074；
文本对齐：居中；
}
#内容：以前{
内容：''；
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
HTML
主页

寿司派对

研究生

计算机科学系

加拿大温莎大学










您好，我是美国理工大学一年级的硕士生
. 

我目前在他的监督下工作。我的研究兴趣
包括计算机视觉、机器人学、机器学习和人工智能。



我已经完成了我的计算机科学学士学位（理学学士），专业是软件工程
2011年。


[PDF]

调整窗口大小后的网页图像

---

!！[在此处输入图像描述][1

这是按照您告诉它的操作。您将

#intro

的

最小高度设置为20%。如果您将浏览器设置得太小，则这20%的高度不足以显示所有文本

尝试将
min height
设置为
150px
。这似乎足以防止文本被剪裁。如果您将窗口设置得更高，它仍然会增长。
css完全按照您的要求执行。您已将顶部区域的高度设置为30%-因此它的高度为30%，即使内容高于30%Thanks，它工作得很好。再问一个问题，所以我应该将这个最小高度添加到每个div（以像素为单位），而不是百分比。我尝试添加其他div（以像素为单位），但对它们不起作用。当我调整窗口大小时，从
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset 'UTF-8';

h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small
{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent; 
}

#intro
{
    position:relative;
    width:100%;
    height:30%;
    background: #566074;
    min-width:50%;
    min-height:20%;
}

#nav
{
     position:relative;
     width: 100%;
     height: 7%;
}

#buffer
{
    position:relative;
    width:100%;
    height:1%;
}

/* Base Styles */
#nav ul,
#nav li,
#nav a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: 'Lato', sans-serif;
}
#nav {
  border: 1px solid #133e40;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  width: auto;
}
#nav ul {
  zoom: 1;
  background: #36b0b6;
  background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
  background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#nav ul:before {
  content: '';
  display: block;
}
#nav ul:after {
  content: '';
  display: table;
  clear: both;
}
#nav li {
  float: left;
  margin: 0 5px 0 0;
  border: 1px solid transparent;
}
#nav li a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  padding: 8px 15px 9px 15px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid transparent;
  font-size: 16px;
}

#nav li.active a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
#nav li:hover {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #36b0b6;
}
#nav li:hover a {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  display: block;
  background: #1e6468;
  border: 1px solid #133e40;
  -moz-box-shadow: inset 0 5px 10px #133e40;
  -webkit-box-shadow: inset 0 5px 10px #133e40;
  box-shadow: inset 0 5px 10px #133e40;
}
img
{
    height:100%;
    position:relative;
    width:15%;
    padding-right:2%;
    float:left;
}

#intro p
{
    color: white;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:150%;
    padding-top:2%;
    font-weight:bolder;
}

#buffer1
{
    width:100%;
    height:1%;
    position:relative;
}

#content {
    position : absolute;
    width : 99%;
    height : 60%;
    background-color : #566074;
    text-align: center;
}
#content:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

HTML

<html>
    <head>
        <title>
            HomePage
        </title>

        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>

        <div id= 'intro'>
        <img src="pics/Sushil_Parti.jpg" alt="Sushil Parti">
        <p>
            Sushil Parti <br>
            Graduate Student <br>
            Dept. of Computer Science <br>
            University of Windsor 
        </p>
        </div>

        <div id='buffer'></div>

        <div id='nav'>
            <ul>
                <li class='active'> <a href='#'><span>About</span></a></li>
                <li> <a href='academics.html'><span>Courses</span></a></li>
                <li> <a href='research.html'><span>Research</span></a></li>
                <li> <a href='work.html'><span>Work Experience</span></a></li>
                <li> <a href='activities.html'><span>Activities</span></a></li>
                <li class='last'><a href='contact.html'><span>Contact Me</span></a></li>
            </ul>
        </div>

        <div id='buffer1'></div>

        <div id ='content'>
            <div id='info'>
                <p>
                    Hi, I am a first year MSc student in <a href="http://www1.uwindsor.ca/cs/">Computer Science</a> at 
                    <a href="http://www.uwindsor.ca/">University of Windsor</a>. </br>
                    I am currently working under the supervision of <a href ="http://danwu.myweb.cs.uwindsor.ca/">Prof. Dan Wu</a>. My research interests
                    include Computer Vision, Robotics, Machine Learning and AI.
                    <br> <br>
                    I have completed my bachelors degree (B.Tech) in Computer Science with specialization in Software Engineering from <a href="http://www.lpu.in/">Lovely Professional University</a> 
                    in 2011.<br><br>
                    <a href="docs\resume.pdf"> Curriculum Vitae </a> [PDF]
                </p>
            </div>
        </div>

    </body>
</html>