html - 调整窗口大小时如何动态更改截面高度？

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 规则。例如，您为#menu2 在所有窗口大小 中定义left: 600px。结果浏览器将所有窗口大小的“左”设置为 600px，如果您调整浏览器窗口的大小，您仍然有 600px。 我认为使用百分比而不是像素 可以解决您的问题。