Question

当文本不适合它时，我正在尝试使单个div可滚动。这在台式机上效果很好，但在chrome dev控制台中，当我模拟移动设备时，它不会滚动，并且父div的背景图像也会缩放。请参见下面的代码。任何建议将不胜感激。

谢谢！布雷特

PS：请原谅我计划以后改进的混乱代码。页面的这一部分让人头疼。


#description {
    overflow-y: auto;
}

@media only screen and (max-width: 600px) {
        
    #results {
        display: grid;
        width: 100%;
        height: 100%;
        padding: 2vh;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-row-gap: 2vh;
        grid-auto-flow: row;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        background-image: url(./assets/img/bg_hero_3.svg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #results > #description {
        grid-row: 3;
        grid-column: 1 / 4;
        width: 100%;
        height: 100%;
        padding: 10%;
        text-align: center;
        display: block;
    }

    #results > div {
        display: grid;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        grid-row-gap: 1vh;
    }
    
    .bubble {
        height: 15vw !important;
        width: 15vw !important;
    }
    
    h6 {
        font-family: ArchitectsDaughter;
        margin: 0;
        padding: 0;
        font-weight: 700;
        font-size: 3vw;
        text-align: center;
    }
}

@media only screen and (min-width: 600px) {

    #results {
        display: grid;
        width: 100%;
        height: 80vh;
        padding-top: 0%;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: auto auto 1fr;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        background-image: url(./assets/img/bg_hero_3.svg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }



    #results > #description {
        grid-row: 2;
        grid-column: 1 / 7;
        width: 100%;
        height: 100%;
        padding: 10%;
        text-align: center;
        color: white;
        display: block;
    }
    
    #results > div {
        grid-row: 1;
        display: grid;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        align-text: center;
        grid-template-rows: 10vh auto;
    }
    
    h6 {
        font-family: ArchitectsDaughter;
        margin: 0;
        padding: 0;
        font-weight: 700;
        font-size: 2vw;
        text-align: center;
    }

}

Answer 1

好吧，我知道了。我需要为网格设置恒定的高度（#results），还需要为网格行模板（第三行）设置高度。参见下面的代码：

    #results {
        display: grid;
        width: 100%;
        height: 80vh;
        padding: 2vh;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto 50vh;
        grid-row-gap: 2vh;
        grid-auto-flow: row;
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
        background-image: url(./assets/img/bg_hero_3.svg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

溢出：在台式机上自动工作，但不在移动设备上工作

1 个答案: