Question

我目前有一个最大高度为800px的容器。它也有溢出-y：滚动。我要实现的目标很简单（可能不是那么简单，因此为什么我要问你们！）。

我想继续使用此溢出Y滚动。但是，我有被切断的内容。我有一个带有Future-dropdown类的div，我希望里面的内容有意覆盖此容器。如果您看一下代码片段，那么由于y溢出滚动，div中的我的内容将被截断。

我该如何解决却仍然存在？我仍然需要这个可滚动的容器，但我还需要一种方法来使内容仍显示在该位置。

请提出建议！

    * {
        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>

Answer 1

也许你可以做这样的事情

li {
    height: 200px;
    width: 100%;
    border-radius: 2px;
    background-color: white;
    font-size: 15px;
    text-align: left; /*Change from center to left*/
    list-style-type: none;
    background: lightgray;
    padding: 20px; /*Add some padding*/
    /* margin: 0 auto; */
}

让我知道这是否对您有帮助！

Answer 2

看看这个代码片段。

我添加了以下CSS，

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

由于将div与left属性一起放置会导致其从定义的像素位置开始，因此被裁剪了。

* {
        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>

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

2 个答案: