Как динамически изменять высоту раздела при изменении размера окна?

Question

Я работаю над сайтом, который разделен на разделы. Когда ссылки изначально загружаются, все происходит аккуратно. Если, однако, размер окна изменяется, то выравнивание становится искаженным. Веб-сайт: karenrubkiewicz.com/karenportfolio1

Заранее благодарен!

CSS:

/* ------------LAYOUT------------- */ 
body{ 
letter-spacing:.25px; 
overflow-y:hidden; 
font-family:Arial, Helvetica, sans-serif; 
line-height:17px; 
font-size:12px; 
height: 100vh;} 

html{ 
height: 100vh;} 

.textwrap{ 
position: relative; 
width:300px; 
left:50px; 
color:#000; 
float:left; 
margin-right:190px; 
top: 30vh; 
height:100vh;} 

.textwrap a{ 
text-decoration:none; 
color:#999;} 

.textwrap a:hover{ 
text-decoration:none; 
color:#000;} 

.textwrap .contact{ 
position:relative; 
top:40%;} 

/* ------------MENU------------- */ 

#menu1{ 
top:50px; 
z-index:100; 
position:fixed; 
height:100px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
width:98%; 
left:500px;} 

#menu2{ 
top:50px; 
z-index:100; 
position:fixed; 
height:100px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
width:98%; 
left:600px;} 

#menu3{ 
top:50px; 
z-index:100; 
position:fixed; 
height:100px; 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
right:2px;} 

#menublock{ 
top:-10px; 
z-index:10; 
position:fixed; 
height:100px; 
background-color:#fff; 
width:100%; 
left:0px;} 

#menu1 a,#menu2 a{ 
text-decoration:none; 
color:#999;} 

#menu1 a:hover,#menu2 a:hover{ 
text-decoration:none; 
color:#000; 
-webkit-transition: all 0.2s ease;} 

#menu3 img{ 
height:20px; 
margin-left:-3px;} 

#menu3 a{ 
opacity:.2; 
-webkit-transition: all 0.2s ease;} 

#menu3 a:hover{ 
opacity:1;} 

#arrowmenu{ 
position:fixed; 
top:30vh; 
left:2px;} 

#arrowmenu img{ 
height:20px; 
margin-bottom:-3px;} 

#arrowmenu a{ 
opacity:.2; 
-webkit-transition: all 0.2s ease;} 

#arrowmenu a:hover{ 
opacity:1;} 

/* ------------WORK------------- */ 

.gallery{ 
position:relative; 
display:inline; 
float:left;} 

#galleryblock{ 
position: relative; 
top: 30vh; 
height:100%;} 

/* ------------SECTIONS------------- */ 

section { 
height: 100vh;} 

HTML:

<section id="top"> 
<div class="textwrap"> 
INFO PAGE HERE 
</div> 
</section> 

<section id="project1"> 
<div class="textwrap"> 
PROJECT 1 HERE 
</div> 
</section> 

<section id="project2"> 
<div class="textwrap"> 
PROJECT 2 HERE 
</div> 
</section> 

<div id="menu1"> 
<a href="#project1">+Work</a><br> 
</div> 

<div id="menu2"> 
<a href="#top">+Info</a><br> 
</div> 

<div id="menu3"> 
<a href="https://www.behance.net/KarenRubkiewicz" target="_blank"><img src="images/behance.png"></a> 
<a href="https://www.linkedin.com/pub/karen-rubkiewicz/87/926/879" target="_blank"><img src="images/linkedin.png"></a> 
</div> 

<div id="menublock"></div> 

<div id="arrowmenu"> 
<a href="#project1"><img src="images/up.png"></a><br> 
<a href="#project2"><img src="images/down.png"></a><br> 
</div> 

Answer 1

Я думаю, ваша проблема заключается в использовании "пикселей" для CSS left правила. Вы должны определить все left и right правил в процентах. Например, вы определяете left: 600px для #menu2во всех размерах окна. В результате браузер устанавливает 600 пикселей для «левого» во всех размерах окна, и если вы измените размер окна браузера, все равно у вас осталось 600 пикселей. Я думаю, используя процент вместо пикселя может решить вашу проблему.