問題不在于您navbar，而body在于您的網(wǎng)頁。只需將margin: 0and添加padding: 0到您的身體，滾動條就會消失。
檢查并運行以下代碼片段或此CodePenmargin: 0 ，以獲取添加了屬性的網(wǎng)頁的實際示例：
const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')
let state = {}
function startGame() {
state = {};
showTextNode(1);
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
textElement.innerText = textNode.text;
while(optionButtonsElement.firstChild) {
optionButtonsElement.removeChild(optionButtonsElement.firstChild);
}
document.getElementById('image').style.display = "block"
textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";
textNode.options.forEach(option => {
if(showOption(option)) {
const button = document.createElement('button');
button.innerText = option.text;
button.classList.add('btn')
button.addEventListener('click', () => selectOption(option));
optionButtonsElement.appendChild(button);
}
})
}
function showOption(){
return true;
}
function selectOption(option) {
const nextTextNodeId = option.nextText;
state = Object.assign(state, option.setState)
showTextNode(nextTextNodeId)
}
const textNodes = [
{
id: 1,
text: 'Case Study: BioPharma Expansion',
options: [
{
text: 'Start',
setState: {},
nextText: 2
}
]
},
{
id: 2,
text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
options: [
{
text: "I'd like to know more about BioPharma's revenue",
setState: {},
nextText: 3
},
{
text: "I'd like to know more about BioPharma's cost structure",
setState: {},
nextText: 3
}
]
},
{
id: 3,
text: "BioPharma's revenue has increased year on year by 12% since 2014",
options: [
{
text: "What about costs?",
setState: {},
nextText: 4
}
]
},
{
id: 4,
text: "BioPharma's cost structure is shown below in Figure 1",
imageLink: "figure1a.png",
options: [
{
text: "Here is some stuff",
}
]
}
]
startGame();
*, *::before, *::after {
box-sizing: border-box;
}
.nav {
}
body {
z-index: 0;
background-color: black;
width: 100vw;
height: 100vh;
margin: 0px;
padding: 0px;
}
.main {
z-index: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-family: 'Times New Roman', Times, serif;
}
#menuToggle {
display: block;
position: absolute;
top: 40px;
left: 40px;
z-index: 2;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 3;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: white;
border-radius: 3px;
z-index: 2;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: none;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: none;
}
.container {
width: 1000px;
height: 90%;
max-width: 80%;
background-color: white;
border-radius: 7px;
box-shadow: 0 0 10px 2px;
display: grid;
grid-template-rows: 60% 40%;
}
.container-lower {
border-top: 10px solid rgba(0,0,0,1);
position: relative;
}
.container-upper {
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(1, auto);
gap: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.btn {
background-color: white;
border: 2px solid black;
border-radius: 5px;
padding: 10px 10px;
width: 400px;
color: black;
outline: none;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
}
.btn:hover {
border-color: grey;
color: grey;
}
#text {
font-size: 30px;
text-align: center;
}
#image {
width: 650px;
height: 150px;
background-repeat: no-repeat;
margin: 40px auto 0px auto;
background-size: 650px 150px;
}
.wrapper {
width: 70%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
<div class="nav">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Info</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<div class="container-upper">
<div class="wrapper">
<div id="text" class="text">Text</div>
<div id="image"></div>
</div>
</div>
<div class="container-lower">
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
<button class="btn">Option 3</button>
</div>
</div>
</div>
</div>
根據(jù)這個其他SO 線程margin上接受的答案，默認情況下和默認情況下的原因padding是0因為瀏覽器具有不同的默認樣式表。
