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。因此，浏览器在所有窗口大小中为“left”设置600px，如果您调整浏览器窗口大小，仍然剩下600px。我认为使用百分比而不是像素可以解决您的问题。

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

1 个答案: