Question

我会解释我的问题。对于学校我必须建立一个网站，但它不应该如何工作。我在屏幕周围有一个由div组成的边框，中间有一个页面。当我第一次打开页面时，一切都已到位，但是当我点击其中一个导航项目（#link）时，页面突然失去其上边距和左边距。所以它超出了边界。我将所有代码粘贴在代码段中，因为我认为这对于帖子来说太过分了。

要查看完整页面和问题，请将代码复制到文件中，以便在浏览器中打开它。我使用vw和vh因为它希望它在不同的屏幕上是相同的。我将使用百分比

来完成内部元素

所以我的问题：

如何防止这种情况发生，并举例说明？
有没有办法将#Home设置为通常的着陆空间？没有在链接中添加#Home（并且不改变其位置）？
关于CSS动画的最后一个问题，如何添加转换，使页面看起来像滚动到#div。

＆＃13;

body{
  top: 0;
  margin: 0;
  padding: 0;
  left: 0;
}
.wrapper{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.container{
  width: 300vw;
  height: 200vh;
  background-image: url("../img/background.png");
  background-size: cover;
}
/* simple nav*/
ul{
  display: inline;
  z-index: 99;
  position: fixed;
}
ul li{
  list-style-type: none;
  display: inline;
}
ul li a{
  text-decoration: none;
}
/*pages*/

.page{
  margin: 10vh 10vw;
  width: 80vw;
  height: 80vh;
    transition: 2s;
}

#Interactive{
  background: blue;
  float: left;

}
#Graphical{
  float: left;

}
#Company{
  float: left;
}
#Conclusion{
  float: left;
}
#Home{
  float: left;
}
/*header borders*/
.borders{
  position: fixed;
  z-index: 30;
}
.border-top{
height: 10vh;
width: 100vw;
top:0;
background: #007CFF;
}
.border-left{
  height: 100vh;
  width: 10vw;
  top: 0;
  background: #007CFF;
  position: absolute;
}
.border-right{
  height: 100vh;
  width: 10vw;
  top: 0;
  background: #007CFF;
  float: right;
  margin-top: -10vh;

}
.border-bottom{
  height: 10vh;
  width: 100vw;
  bottom: 0;
  background: #007CFF;
  position: absolute;
}

＆＃13;

<div class="header">


<ul>
  <li><a href="#Home">Home</a></li>
  <li><a href="#Interactive">Interactive</a></li>
  <li><a href="#Graphical">Graphical</a></li>
  <li><a href="#Company">Company</a></li>
  <li><a href="#Conclusion">Conclusion</a></li>
</ul>
</div>


<div class="borders">
<div class="border-top">
</div>
<div class="border-left">
</div>
<div class="border-right">
</div>
<div class="border-bottom">
</div>
</div>

<div class="wrapper">
<div class="container">
  <div id="Interactive" class="page">
  </div>
  <div id="Graphical"class="page">
  </div>
  <div id="Company"class="page">
  </div>
  <div id="conclusion"class="page">
  </div>
  <div id="home"class="page">
  </div>
</div>
</div>

＆＃13;

感谢您与我的思考，感谢任何帮助。我真的不知道怎么称这个帖子，所以搜索它很困难。

Answer 1

请删除此div

AppNavigation

我认为这只是你所期待的。

Answer 2

我已根据我想要实现的目标对您的HTML代码和CSS代码进行了更改。以下是代码。

* {
    padding: 0;
    margin: 0;
}
body{
    display: flex;
  flex-direction: column;
}
.header { 
    padding: 10px 50px;
}

ul li{
  list-style-type: none;
  display: inline-block;
  padding: 10px;
}
.wrapper {
    flex-grow: 1;
    padding: 50px 150px;
}

.page{
    transition: 2s;
    width: 100%;
    height: 100%;
}
#Home{
    background-color: pink;
}
#Interactive{
  background: blue;
}
#Graphical{
    background-color: green;
}
#Company{
    background-color: yellow;
}
#Conclusion{
    background-color: orange;
}

<div class="header">
    <ul>
      <li><a href="#Home">Home</a></li>
      <li><a href="#Interactive">Interactive</a></li>
      <li><a href="#Graphical">Graphical</a></li>
      <li><a href="#Company">Company</a></li>
      <li><a href="#Conclusion">Conclusion</a></li>
    </ul>
</div>
<div class="wrapper">
  <div id="Home" class="page">
  </div>
  <div id="Interactive" class="page">
  </div>
  <div id="Graphical" class="page">
  </div>
  <div id="Company" class="page">
  </div>
  <div id="Conclusion" class="page">
  </div>
</div>

如果要使用转换进行平滑滚动。参考 this 文章，你将不得不使用jQuery。
除非必要，否则请勿使用固定的width或height。
使用document.getElementById('Home').focus() document.ready() js中的absolute来默认显示主页。
始终专注于制作具有相对内容而非{{1}}内容的响应式解决方案。

如果您需要更多帮助，请告诉我们:)

点击div链接时页面更改

2 个答案: