Переполнение прокрутки-y приводит к обрезанию содержимого - PullRequest
Новая
       10

Переполнение прокрутки-y приводит к обрезанию содержимого

0 голосов
/ 13 ноября 2018

В настоящее время у меня есть контейнер, максимальная высота которого составляет 800 пикселей.Он также имеет переполнение-у: прокрутки.То, что я пытаюсь выполнить, - это просто (возможно, не так просто, поэтому я и спрашиваю вас, ребята!).

Я хочу продолжать иметь эту прокрутку переполнения.Тем не менее, у меня есть контент, который отключается.У меня есть div с классом future-dropdown, в котором я хочу, чтобы содержимое внутри него нарочно перекрывало этот контейнер.Если вы посмотрите на фрагмент кода, мое содержимое внутри div будет обрезано, как и должно быть из-за прокрутки overflow-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>

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Посмотрите на этот фрагмент кода.

Я добавил следующие 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>
0 голосов
/ 13 ноября 2018

Может быть, вы можете сделать что-то вроде этого 

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; */
}

Дайте мне знать, если это поможет вам!

...