Вот скриншот того, что я хочу: https://gyazo.com/a96db0095968cbb9366674c120d3feed
Итак, я отключил overflow-y (скрытый) в теле, и я добавил overflow-y:scroll в оболочку.
Панель показывает, но ничего не происходит, если я пытаюсь прокрутить.Я предполагаю, что это может иметь какое-то отношение к элементам flex (я прокомментировал каждый элемент в .css и проверил, работает ли он, и он работает, но я забыл, какой элемент и какой стиль он имел.
После этого я проверил каждую линию стиля и больше никогда не находил элемент. Так что я знаю, как-то он должен работать.
Кроме того, если я делаю полосу прокрутки на теле, она отлично работает, просто если я положу егона обёртке.
Вот мои CSS и HTML:
@charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0;
background-color: lightgray;
overflow-y: hidden;
background-image: url("Bilder/Panorama.jpg");
}
header {
margin: 0px;
padding: 0px;
width: 100%;
background-color: brown;
position: fixed;
display: block;
box-shadow: 10px 1px 40px grey;
}
/* *********************************
PC Styles
********************************/
@media only screen and (min-width: 481px) {
#Wrapper {
overflow-y: scroll !important;
margin: 0;
padding: 0px;
box-sizing: border-box;
width: 70%;
min-height: 860px;
margin-left: auto;
margin-right: auto;
background-color: darkslategray;
position: relative;
top: 70px;
}
header h1 {
font-family: 'Orbitron';
margin: 0px;
margin-left: 20%;
line-height: 70px;
text-decoration: underline;
}
/* NAVIGATION */
.navbar {
margin: 0px;
padding: 0;
position: absolute;
top: -0.7%;
right: 0%;
}
.navitem {
background-color: cadetblue;
margin: 0px;
padding: 0.6em;
list-style-type: none;
display: inline;
margin-right: 0.6em;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
a {
font-family: 'Gudea';
color: brown;
font-weight: 700;
font-size: 2em;
margin: 0px;
padding: 0px;
text-decoration: none;
position: relative;
top: 0.1em;
}
.navitem:hover {
background-color: skyblue;
margin: 0px;
padding: 0.6em;
list-style-type: none;
display: inline;
margin-right: 0.6em;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
transition: 500ms ease;
}
a:hover {
background-color: skyblue;
font-family: 'Gudea';
font-size: 2em;
margin: 0px;
padding: 0px;
text-decoration: none;
position: relative;
top: 0.1em;
transition: 500ms ease;
}
.active {
background-color: skyblue;
transition: 500ms ease;
}
/* NAVIGATION ENDE */
main img {
height: 38em;
width: 38em;
margin-left: 2em;
}
#flexcontainermain {
align-items: center;
display: flex;
flex-direction: row-reverse;
margin-top: 8%;
justify-content: space-around;
}
#flexcontainer1 {
display: flex;
flex-direction: column;
align-content: center;
}
.flexitemmain {
/* Unser Bild */
margin: 1%;
}
.flexitem {
font-family: 'PT Sans Narrow';
color: coral;
font-size: 90%;
text-shadow: 1px 1px 1px #000;
margin: 4%;
display: flex;
flex-direction: row;
}
/**********************************
Handy-Styles
*********************************/
@media only screen and (max-width: 480px) {
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gudea" rel="stylesheet">
<meta charset="utf-8">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<title>Tom - Projekte</title>
</head>
<body>
<header>
<h1>Tom's Website</h1>
</header>
<div id="Wrapper">
<ul class="navbar">
<li class="navitem active"><a href="index.html" class="active">Startseite</a></li>
<li class="navitem"><a href="lebenslauf.pdf">Lebenslauf</a></li>
<li class="navitem"><a href="Portfolio.html">Portfolio</a></li>
</ul>
<div id="all">
<div id="flexcontainermain">
<div class="flexcontainer1">
<div class="flexitem">
<h2>Mein Name ist Tobi Smith und ich bin 20 Jahre alt.<br><br> Ich wurde am 13.09.1998 in Mönchengladbach geboren, und lebe seit dem hier.<br> Derzeit zusammen mit meiner Freundin(links zu sehen) in einer kleinen Wohnung.<br><br>In meiner Freizeit
programmiere ich sehr gerne, und bilde mich im Informatikbereich weiter. Dabei spezialisiere ich mich auf den Web-Bereich und arbeite derzeit mit:</h2>
</div>
</div>
<div class="flexcontainer1">
<div class="flexitemmain">
<img src="Bilder/us.jpeg">
</div>
</div>
</div>
<h2>Mein Name ist Tom </h2>H2>
<h2>Mein Name ist Tom </h2>H2>
<h2>Mein Name ist Tom </h2>H2>
<h2>Mein Name ist Tom </h2>H2>
<h2>Mein Name ist Tom </h2>H2>
</div>
<footer>
</footer>
</div>
</body>
</html>