如何让网页中固定定位的Sections盒子在窗口缩小时不超出屏幕？

我正在创建的网页中有一个标题为“Sections”的aside盒子，全屏状态下显示正常，但缩小窗口时，这个盒子会移出屏幕，希望实现窗口缩小时该盒子仍能完整显示在屏幕内。

HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="good, website, super">
        <meta name="description" content="This is a super good website.">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="icon" type="image/x-icon" href="apple.jpg">
        <link rel="stylesheet" href="samplestyles.css">
        <title>Super Good Website!</title>
    </head>
    <body>
        <h1 id="top">Welcome!</h1>
        <br>
        <nav>
            <a href="https://www.w3schools.com/html/default.asp" target="_blank">W3 Schools Website</a>&emsp;
            <a href="https://www.coolmathgames.com/" target="_blank">Cool Math Games</a>&emsp;
            <a href="https://www.youtube.com/" target="_blank">Youtube</a>
        </nav>
        <br>
        <aside>
            <h2>Sections</h2>
            <ul>
                <li><a href="#top">Top</a></li>
                <li><a href="#bottom">Bottom</a></li>
            </ul>
        </aside>
        <section>
            <p id="lorem">
            I need this to be a long section so I can scroll. Enjoy some lorem ipsum.<br>
            Lorem ipsum dolor sit amet. Est placeat quae eos nemo molestiae ut dolorum repellendus et magnam velit sed consequatur assumenda hic cumque molestiae. Est laudantium eius et exercitationem eligendi sed labore fugiat sed porro officiis rem laudantium pariatur. Est iure autem quo assumenda quod quo suscipit minima est expedita magni et distinctio dolores qui quae natus. Est expedita quasi ab expedita magnam aut facilis rerum est atque eveniet vel esse voluptatem. Ut error  eos fugit commodi est exercitationem ratione non magnam atque et delectus quia sed explicabo libero. Eos assumenda consectetur vel doloremque nobis a voluptatem distinctio ut ipsam earum non quibusdam expedita non sint nemo est laudantium aspernatur! Non delectus repellendus qui corporis neque qui ducimus soluta ut explicabo quod. Non quisquam exercitationem cum suscipit Quis qui sunt accusantium et nesciunt temporibus. Et nihil nostrum ea molestiae vitae sed voluptates voluptas aut autem magnam est rerum adipisci et veritatis consequatur. Qui necessitatibus debitis id labore corrupti aut pariatur officiis aut esse minus id voluptatem illo ab molestiae pariatur? 33 ullam nobis sed fuga ipsam ut maiores odit 33 ipsum maxime. Et enim totam qui fugiat rerum ut corrupti voluptatem aut laborum ullam ut harum fugiat. Eum ipsam placeat et animi doloremque et magni eveniet sit omnis odit. Qui officiis tempore in animi vitae sit maxime dolore sit incidunt natus sit omnis recusandae. Ut eius repellendus ut rerum voluptate sit atque quod aut omnis sapiente. 33 distinctio pariatur et dolorem beatae et sunt consequatur. Aut odio doloremque id consequatur aspernatur et sunt molestiae sed aliquam earum ab quam veritatis hic odio nulla. Qui quod nihil sed rerum magni ab rerum minima eum deleniti facilis! Aut quia nemo in officia nisi et Quis laborum. Qui autem quibusdam qui quia molestiae aut dolorum voluptatem non voluptatem quam sed voluptatem quam ut deleniti labore non eaque modi. Nam beatae totam et aperiam sunt 33 quam quas sit quia internos aut rerum omnis. Et magnam facere qui itaque corrupti id reprehenderit iure sit laborum ipsam eum animi magnam ut inventore dolorum non saepe temporibus. Non veniam delectus qui sunt iste a repudiandae nostrum. Non inventore quibusdam non itaque velit non esse voluptatem id natus quia et fuga enim id saepe voluptatem eos culpa nulla? Quo quam harum non perferendis illo eum ullam quia est dolore amet aut atque culpa. Et assumenda nostrum est alias molestiae  exercitationem asperiores eos doloribus tempore ut provident amet ad ipsa sint. Et consequuntur unde et praesentium ipsa sed facere aperiam. Non obcaecati internos cum numquam sunt sit voluptas voluptatem non blanditiis nostrum id eligendi soluta aut atque ratione et earum quam. Est dicta Quis vel doloribus debitis eos quae minus quo praesentium consequatur. Qui eius nobis ut voluptate aspernatur et asperiores placeat et quidem illum sit pariatur dolores ut Quis harum ut culpa<span id="bottom"> voluptas.</span>
            </p>
        </section>
    </body>
</html>

CSS代码 #

body{
    background-color: black;
    color: white;
}
h1{
    background-color: gray;
    padding: 5px;
    color: #EAD94C;
    text-align: center;
    font-size: 60px;
    outline: 40px solid gray;
}
nav{
    background-color: gray;
    color: #5D2E8C;
    font-size: 20px;
    outline: 8px solid gray;
    text-align: center;
}
aside{
    padding: 20px;
    border: thin solid white;
    margin-bottom: 1000px;
    position: fixed;
    left: 90%;
}
section{
    font-size: 25px;
}
#lorem{
    max-width:88%;
    padding-left: 5px;
}

问题根源在于aside的left: 90%定位：当窗口宽度缩小时，盒子左侧距离屏幕左侧90%，加上盒子自身宽度，整体会超出屏幕右侧。以下是两种修复方案：

方案一：改用right定位 #

直接将left:90%替换为固定或百分比的右侧间距，让盒子始终紧贴屏幕右侧，不会被挤出：

aside{
    padding: 20px;
    border: thin solid white;
    margin-bottom: 1000px;
    position: fixed;
    right: 10px; /* 可根据需求调整为百分比，比如right:2% */
}

方案二：结合transform实现自适应右侧定位 #

如果希望保留百分比逻辑，可通过left:100%让盒子左侧对齐屏幕右侧，再用transform将盒子拉回屏幕内并留出间距：

aside{
    padding: 20px;
    border: thin solid white;
    margin-bottom: 1000px;
    position: fixed;
    left: 100%;
    transform: translateX(-100%) translateX(-10px); /* 先拉回自身宽度，再设置右侧间距 */
}

额外优化建议 #

可以给aside添加宽度限制，避免窗口极窄时内容换行导致布局混乱：

aside{
    /* 保留原有样式 */
    width: fit-content; /* 自适应内容宽度 */
    max-width: 200px; /* 可选，限制最大宽度 */
}

内容的提问来源于stack exchange，提问作者Foofoo9906