以下是我想要的屏幕截图: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>
答案 0 :(得分:0)
将此添加到您的#Wrapper
类中:
#Wrapper {
height: calc(100vh - 70px);
min-height: 100%;
}
请参阅此文档以全面了解VH和VW属性:https://css-tricks.com/fun-viewport-units
100vh将从视口的顶部和底部拉伸#Wrapper
。
我从70px
中减去了100vh
,因为#Wrapper
的位置距顶部70像素,该高度也与导航栏的高度相同,因此此计算将考虑所有在计算高度时在上方。
这是一个工作的小提琴:https://jsfiddle.net/Ly06krt3/18/