我对此很陌生，所以我不知道我是否有一些相互冲突的东西。
但是我想要的是"textbox"被固定在导航条下的位置，并且当其中的信息超过屏幕大小时，它是可滚动的。当屏幕调整大小时，我也不希望框移动，我只想让文本变小，比如使用最小宽度。
我有一点JavaScript连接到这个网站，但我不知道是否需要包括它。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins";
}
.background {
background: linear-gradient(
to bottom left,
rgba(0, 0, 0, 0.7),
rgba(255, 255, 255, 0.4)
),
url(./Revendreth111.jpg);
width: 100%;
height: 1600px;
background-size: cover cover;
overflow: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 999;
}
li {
/* float: right; */
float: left;
border-right: 1px solid rgb(87, 87, 87);
}
li a {
display: block;
color: rgb(161, 161, 161);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: rgb(27, 27, 27);
}
a:hover {
color: #800a0a;
font-weight: normal;
}
.active {
background-color: #610707;
}
@media screen and (max-width: 600px) {
ul.navbar li.right,
ul.topnav li {
float: none;
}
}
/* Textbox */
.text-box {
background: rgba(12, 12, 12, 0.555);
color: rgb(161, 161, 161);
margin-top: -80%;
width: 70%;
height: 150%;
margin-left: auto;
margin-right: auto;
padding: 20px;
/* text-align: center; */
filter: drop-shadow(0 0.2rem 0.9rem rgba(0, 0, 0, 0.418));
backdrop-filter: blur(0.11rem);
padding: 20px;
position: relative;
/* top: 0px; */
}
#sidebar {
background-color: rgba(0, 0, 0, 0.418);
padding: 20px;
width: 40%;
}
.paragraph {
width: 90%;
padding: 20px;
}
.row {
display: flex;
}
.column {
flex: 50%;
margin-left: 3%;
}
#logo {
width: 40px;
margin: 10px;
position: relative;
/* Adjust these values accordingly */
top: 18px;
left: 5px;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: rgba(179, 179, 179, 0.568); /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 50%; /* Rounded corners */
font-size: 18px; /* Increase font size */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
#myBtn:hover {
background-color: #0e0e0e69; /* Add a dark-grey background on hover */
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.377));
}
/* Scroll bar customization */
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f100;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(27, 27, 27, 0.911);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.171);
}
.footer {
margin-top: 20px;
color: white;
text-align: center;
font-family: arial;
font-size: 13px;
font-style: normal;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./Test1.css" />
<title>PLACE HOLDER / DRAENOR-EU</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">progress</a></li>
<li><a href="#">apply</a></li>
</ul>
<div class="background"></div>
<div class="text-box">
<div class="row">
<div class="column"><h1><img src="./logo.png" alt="" id="logo"> Welcome to Place Holder</h1>
<p class="paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima non aspernatur ab architecto asperiores nemo odit dolorum explicabo autem eaque hic deserunt facere impedit maiores debitis obcaecati quibusdam vel et eveniet blanditiis recusandae nihil, modi earum odio? Repellendus dolorem atque dolor quisquam, fugit et ipsa. Dolorem facilis totam dolore aliquam.
</p>
<p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis repellat minus quas. Debitis explicabo, laborum quasi at facilis assumenda alias itaque eum! Maiores dolores neque mollitia odit nulla cumque, illum cum reiciendis deserunt eveniet! Est beatae architecto, minus, aut, alias soluta tempore quos numquam quod accusantium quidem corrupti ex suscipit?</p></div>
<div class="column" id="sidebar"><h2>RECRUITMENT</h2>
<p class="paragraph">Temporibus sed, quidem quo amet animi explicabo beatae illo aperiam numquam asperiores.</p></div>
</div>
</div>
</div>
</div>
<div class="footer">
Copyright © Place Holder 2021. All rights reserved.
<button onclick="topFunction()" id="myBtn" title="Go to top">▲</button>
</div>
<!-- FOOTER -->
</body>
</html>
<script type="text/javascript" src="./test1.js"></script>不确定，但....试着用宽度=";"或高度=">
(IN SIDE THE DIV BLOCK)
{未验证工作}
也!欢迎成为stackoverflow的新成员!