Question

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);

body
{
  
}


.topbar
{
	position: fixed;
	top: 0px;
	width: 100%;
    right: 0px;
	background-color: tomato;
	text-align: right;
	height: 50px;
	z-index: 100;
}

.texti
{
	margin-right: 15px;
}

.linkur
{
	border: 1px solid black;
	padding: 8.5px;
	margin-right: 10px;
	text-decoration: none;
	border-color: transparent;
	font-size: 1.3em;
	color: darkred;
}
.linkur:hover
{
	background-color: lightblue;
}

label
{
	position: fixed;
	top: -2000px;
}

.mynd
{
	position: fixed;
	top: -50px;
	left:20px;
}

.navigation
{
	height: 96%;
	width: 20%;
	background-color: tomato;
}

.logo
{
	position: fixed;
	top: -100px;
}

.hlid
{
  position: fixed;
  left: -2000px;
  width: 700px;
  height: 90%;
  z-index: 100;
}

.main
{
    position: fixed;
    top: 20%;
	background-color: white;
	left: 20%;
	right: 20%;
	height: 3000px;
	width: 60%;
}


.leikjatexti
{
  border: 1px solid black;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
}

.text2
{
	text-decoration: none;
	color: darkred;
}
@media screen and (max-width: 48em){


	.topbar
	{
		text-align: left;
	}

	.linkur
	{
		position: fixed;
		top: -100px;
	}
	
 input {
  display: none;
}
label,
label {
	position: fixed;
	top: -27px;
	left: 5px;
  color: #0087cc;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  transition: all .15s ease;
  font-size: 30px;
  z-index: 100;
}
label:hover {
  color: #ff7b29;
}

input:checked ~ .hlid {
  position: fixed;
  left: -50px;
  height: 100%;
  transition: all .15s ease;
}
li
{
	list-style-type: none;
}

.hlidlinkur
{
	margin-bottom: 20px;
	margin-top: 20px;
	margin-left: 10px;
}

.hlidlinkura
{
	border: 1px solid black;
	padding: 7px;
	text-align: center;
	border-color: transparent;
	text-decoration: none;
	color: darkred; 
	font-size: 1.1em;
	font-family: "Sans serif";
}

.hlidlinkura:hover
{
	background-color: lightblue;
}
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<title>Main site</title>
	<link rel="stylesheet" href="Gru_main.css" type="text/css" charset="utf-8" />
</head>
<body>
<nav class="topbar">
  <img class="mynd" src="project.png">
  <ul class="texti">
    <a href="" class="linkur">Games</a>
    <a href="" class="linkur">Profile</a>
    <a href="" class="linkur">My Cart</a>
  </ul>
</nav>


<input type="checkbox" id="toggle">
<label for="toggle"><p>&#9776</p></label>
      <nav class="hlid">
        <ul class="navigation">
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li>
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li>
          <li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li>
        </ul>
      </nav>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>


<div class="main">

<a class="text2" href="Gru_login.html">
  <div class="leikjatexti">
    <img href="" class="mynd2" src="portal2.jpg" alt="portal" height="170" width="120">
    <h1>Portal 2</h1>
   <p>
    Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
     í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
   </p>
  </div>
</a>

<a class="text2" href="Gru_login.html">
  <div class="leikjatexti">
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
    <h1>The Walking Dead</h1>
   <p>
   viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
   til að velja rétt og fá rétta endann.

   </p>
  </div>
</a>

<a class="text2" href="Gru_login.html">
  <div class="leikjatexti">
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
    <h1>The Walking Dead</h1>
   <p>
   viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
   til að velja rétt og fá rétta endann.

   </p>
  </div>
</a>

<a class="text2" href="Gru_login.html">
  <div class="leikjatexti">
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120">
    <h1>The Walking Dead</h1>
   <p>
   viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
   til að velja rétt og fá rétta endann.

   </p>
  </div>
</a>
</div>
</body>

强文

我需要帮助这个代码当我尝试滚动时似乎不起作用，我试图在网站上放置一个高度，但是然后该网站没有向下滚动它只是在同一个地方，一些代码中的单词是冰岛语BTW。

Answer 1

您的主要内容是固定的，您应该将其更改为亲戚，以使网站能够滚动。

.main {
  position: relative;
}

Answer 2

您的所有内容似乎都有一个位置：已修复应用。

来自w3.org - “一个位置：固定的元素相对于视口是固定的。它保持原样，即使文档是滚动的。”

您应该只在不想滚动的元素上使用它，例如菜单。

Answer 3

那是因为你将position: fixed;放在main div上。 fixed表示它与视图的顶部保持一致，因此您无法将其滚动。

将其更改为position: relative，然后您可以滚动

无法向下滚动，似乎该网站只是一个截图

3 个答案: