时间戳

首页 > 解决方案 > 溢出-y滚动导致内容被切断

css - 溢出-y滚动导致内容被切断

问题描述

我目前有一个最大高度为 800 像素的容器。它也有溢出-y：滚动。我想要完成的事情很简单（可能不是那么简单，因此我问你们！）。

我想继续拥有这个溢出-y 滚动。但是，我的内容被切断了。我有一个带有 future-dropdown 类的 div，我希望里面的内容有目的地覆盖这个容器。如果你看一下代码片段，我在 div 中的内容会因为溢出-y 滚动而被截断。

我怎样才能解决这个问题并且仍然拥有这个？我仍然需要这个可滚动的容器，但我还需要一种方法来让我的内容仍然显示在那个位置。

请提出建议！

    * {
        padding: 0;
        margin: 0;
    }
    
    .scroll-list {
        max-height: 800px;
        overflow-y: scroll;
        border-radius: 5px;
        border: 5px solid blue;
        width: 400px;
    }
    
    li {
        height: 200px;
        width: 100%;
        border-radius: 2px;
        background-color: white;
        font-size: 15px;
        text-align: center;
        list-style-type: none;
        background: lightgray;
        /* margin: 0 auto; */
    }
    
    .future-dropdown {
        position: relative;
        left: 200px;
    }
  <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="scroll-list">
                <ul>
                    <li>Content <div class="future-dropdown">Future dropdown</div></li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                </ul>
            </div>
            <script src="" async defer></script>
        </body>
    </html>

标签： cssscrolloverflow

解决方案

看看这个代码片段。

我添加了以下css，

.future-dropdown1 {
    position: relative;
    text-align: right;
}
.future-dropdown2 {
    position: relative;
    float: right;
    margin-top: 20px;
}

由于定位divwithleft属性会导致它从定义的像素位置开始，因此它被裁剪了。

* {
        padding: 0;
        margin: 0;
    }
    
    .scroll-list {
        max-height: 800px;
        overflow-y: scroll;
        border-radius: 5px;
        border: 5px solid blue;
        width: 400px;
    }
    
    li {
        height: 200px;
        width: 100%;
        border-radius: 2px;
        background-color: white;
        font-size: 15px;
        text-align: center;
        list-style-type: none;
        background: lightgray;
        /* margin: 0 auto; */
    }
    
    .future-dropdown1 {
        position: relative;
        text-align: right;
    }
    .future-dropdown2 {
        position: relative;
        float: right;
        margin-top: 20px;
    }
<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="scroll-list">
                <ul>
                    <li>Content <div class="future-dropdown1">Future dropdown</div></li>
                    <li>Content <div class="future-dropdown2">Future dropdown</div></li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                    <li>Content</li>
                </ul>
            </div>
            <script src="" async defer></script>
        </body>
    </html>

推荐阅读