單擊div鏈接時頁面發生更改

Question

我將解釋我的問題。 對於學校，我必須建立一個網站，但它不應該如何工作。 我有一個由div圍繞屏幕和中間的頁面組成的邊框。當我第一次打開頁面時，一切都已到位，但是當我點擊其中一個導航項目（#link）時，頁面突然失去了頁邊空白。所以它超出了國界。我在代碼片段中粘貼了所有的代碼，因爲我相信這對帖子來說太過分了。

要查看完整頁面和問題，請將代碼複製到文件中，以便在瀏覽器中打開它。我使用vw和vh，因爲它希望它在不同的屏幕上相同。我會做內部元件大多用百分比

所以我的問題：

1. 如何防止這種情況的發生，並舉例？

2. 有沒有辦法將#Home設置爲通常的登陸空間？沒有在鏈接中添加#Home（並且沒有改變其位置）？

3. 和我最後一個關於CSS動畫的問題，我該如何添加一個轉換，使其看起來像是滾動到#div頁面。

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; 
 
}

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

感謝您與我想，任何幫助表示讚賞。 我真的不知道該怎麼稱呼這個帖子，所以搜索它很困難。

Answer 1

請刪除該div

#Interactive{ 
    background: blue; 
    float: left;} 

我想這只是你期望。

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> 

1. 如果你想使用平滑滾動過渡。請參閱 this 文章，您將不得不使用jQuery。
2. 也不要使用固定的width或height直到必要的。
3. 使用document.getElementById('Home').focus()在document.ready()的js以默認方式顯示主頁。
4. 始終專注於製作具有相對內容而非absolute內容的響應式解決方案。

讓我知道如果你需要更多的幫助:)