Содержимое перекрывается на странице html при изменении размера окна

Question

Я загрузил веб-страницу Проблема в том, что при изменении размера окна браузера содержимое перекрывается друг с другом. Я видел несколько сообщений, связанных с темой в Интернете, но не смог найти разумный ответ. Я пробовал позицию родственника и все, что я знал. Если вы знаете, что-нибудь о том, как решить эту проблему, скажите мне.

CSS:

@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> 

Изображение страницы после того, как окно изменяет размер.

! [Введите описание изображения здесь] [1

Answer 1

Это делает то, что вы сказали это сделать. У вас есть min-height от #intro установлен на 20%. Если вы делаете браузер слишком маленьким, то 20% не достаточно высоки, чтобы показать весь текст.

Попробуйте установить min-height на 150px. Кажется, этого достаточно, чтобы ваш текст не был обрезанным. Тогда он будет расти, если вы сделаете окно выше.