问题：

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

赵雪峰

2023-03-14

我目前有一个容器有一个最大高度800px。它还具有overflow-y：scroll。我想要完成的事情很简单（可能不是那么简单，所以我才问你们！）。

我想继续拥有这个溢出-Y卷轴。然而，我有内容被切断。我有一个具有类future-dropdown的div,我想让里面的内容有目的地覆盖这个容器。如果您看一下代码片段，我在div中的内容会因为溢出-y滚动而被截断。

我怎么能绕过这个还留着这个？我仍然需要这个可滚动的容器，但我也需要一种方式仍然有我的内容显示在那个位置。

请提建议！

null

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

null

共有2个答案

沈运恒

2023-03-14

请看一下这段代码。

我添加了以下css,

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

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

null

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

段干恺

2023-03-14

也许你可以做这样的事

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

如果对你有帮助就告诉我！

类似资料：

CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题

问题内容：假设您有一些样式和标记：当您查看此内容时。该有一个在底部的滚动条，即使我已经溢出X / Y指定的可见和隐藏价值。（在Chrome 11和Opera（？）上观察到我猜测一定有一些w3c规范或某些东西可以告诉我这种情况的发生，但是对我而言，我无法弄清楚为什么。更新：- 我找到了一种方法，可以通过添加另一个包裹在周围的元素来达到相同的结果。一探究竟。问题答案：在Gecko，Saf
滚动包含溢出内容的flexbox

以下是我用来实现上述布局的代码：我省略了用于样式设置的代码。你可以在钢笔里看到所有的东西。上述方法有效，但当区域的内容溢出时，会使整个页面滚动。我只希望内容区域本身滚动，因此我将添加到div。现在的问题是，柱本身并没有超出其父高度，因此边界也在那里被切断。这是显示滚动问题的笔。如何将区域设置为独立滚动，同时使其子项延伸到框的高度之外？
溢出：滚动仍然溢出

问题是当我将页面收缩到某个点时，元素的顶部溢出，奇怪的是底部没有溢出。说清楚一点，我不想让这两个都溢出来。这里有一个指向它的JSFiddle链接:https://jsfidle.net/maep468x/1 您将看到，当您运行它并将结果窗口缩小到大约350px时，元素开始溢出。我已经尝试从.main-content规则中删除我的line-height和font-size属性，但它仍然溢出。
溢出：滚动; 在

问题内容：为什么CSS属性不能在中正常运行，而效果很好？从CSS规范1，2，我不明白为什么。问题答案：我从这里得到了东西！安德鲁·费多纽克（Andrew Fedoniouk）写道：这实际上是我的问题：“一个技术原因是溢出属性不适用于表。” -为什么？这是什么原因我不是专家，但是我相信这只是为了与旧表行为向后兼容。您可以在规范中检查“自动”表布局算法。我很确定该布局算法与溢出属性不兼容
UnmarshalJSON导致堆栈溢出

问题内容：这有效：http : //play.golang.org/p/-Kv3xAguDR。这导致堆栈溢出：http : //play.golang.org/p/1-AsHFj51O。我不明白为什么。在这种情况下，使用接口的正确方法是什么？问题答案：这个将呼叫您的，依次呼叫，等等。如果您需要解组JSON然后对其进行处理，那么一种巧妙的技术是声明一个本地类型，将数据解组到其中，然后转换
div上的溢出滚动

所以我不知道该怎么解释，但我会试着解释的。我有一个评论页面。帖子是一个顶部，下面的评论字段。在这两者的中间是评论。现在的问题是，在几个注释之后，用户最终不得不向下滚动相当多的时间来查看表单。我想做的是显示4个评论，然后当用户向下滚动时，他们会看到更多。只有当他们在评论上滚动时。所以它类似于，但是在div上。这里有更多的信息来可视化它如果用户在任何注释上滚动，它将像一样滚动，并显示更多注释。所以它

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档