<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./lobby_style.css">
<title>Lobby</title>
</head>
<style>
* {
font-family: 'Roboto';
}
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Hide any overflow content */
background: #EAE8DD;
}
/* Set the .fullscreen div to take up full height */
.fullscreen {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px 20px 20px;
}
.header h1 {
color: #db5049;
}
.logo {
width: 150px;
}
.avatar {
width: 3%;
border-radius: 50%;
}
.content {
display: flex;
flex-direction: column;
padding: 20px 20px 20px 20px;
gap: 20px;
align-items: center;
}
.picture-area {
display: flex;
justify-content: center;
}
.timer-container {
width: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column-reverse;
}
.timer-bar {
height: 0;
transition: height 1s linear;
}
#guess {
border-radius: 10px;
height: 30px;
width: 20%;
text-align: center;
font-size: 16px;
}
#pixel-image {
max-height: 800px;
}
.scorelist {
display: flex;
flex-wrap: wrap;
}
.score-item {
display: flex;
align-items: center;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.score-item img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.player-info {
flex: 1;
}
.player-name {
font-weight: bold;
margin: 0;
}
.player-score {
margin: 0;
}
</style>
<body>
<div class="fullscreen">
<div class="header">
<img class="logo" src="../images/logo.png" alt="Our logo">
<h1>Lobby ID:</h1>
<img src="../images/img_avatar.png" alt="Your Avatar" class="avatar">
</div>
<div class="content">
<div class="picture-area">
<img src="../images/roger.jpeg" id="pixel-image" alt="The pixelated picture">
<div class="timer-container">
<div class="timer-bar"></div>
</div>
</div>
<input type="text" name="guess" id="guess" placeholder="Enter your guess">
<div class="scorelist">
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Kenny</p>
<p class="player-score">Score: 120</p>
</div>
</div>
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Cartman</p>
<p class="player-score">Score: 85</p>
</div>
</div>
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Stan</p>
<p class="player-score">Score: 150</p>
</div>
</div>
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Kyle</p>
<p class="player-score">Score: 110</p>
</div>
</div>
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Butters</p>
<p class="player-score">Score: 75</p>
</div>
</div>
<div class="score-item">
<img src="../images/img_avatar.png" alt="profile-picture">
<div class="player-info">
<p class="player-name">Wendy</p>
<p class="player-score">Score: 200</p>
</div>
</div>
<!-- Add more score items here -->
</div>
</div>
</div>
</body>
</html>
所以基本上我希望全屏 div 占据任何屏幕的整个高度。有时（例如在笔记本电脑上）我需要滚动出网站才能看到所有内容。这个问题应该得到解决，并且应该显示整个网站，而无需在任何屏幕上滚动。我不知道如何创建它......
我尝试将全屏 div 高度设置为 100vh / 100%，但遗憾的是这不起作用。
不太确定你的意思，但你可以尝试将“.fullscreen”样式更改为下面的样式以使其全屏：
.fullscreen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}