首页 > 解决方案 > 奇怪的 CSS 溢出问题

问题描述

通过移动设备查看时,我的网站出现错误。我的内容中aside有一个ul。在移动设备上,这种aside类型变得更小。我可以添加 aoverflow-y来查看所有内容,但我只是希望 theaside或 theul更大,但无论我尝试什么,它似乎都不起作用。

站点:83.82.195.132

我对越野车部分的态度:

    {
        overflow-y: auto;
        padding: 0 20px;
        
        ul
        {
            list-style: none;
        }
        
        .channels-list-header
        {
            cursor: pointer;
            margin-top: 20px;
            text-transform: uppercase;
            color: rgba($body-color, 0.3);
            font-size: 0.87rem;
            letter-spacing: 0.04rem;
            transition: color 0.2s linear;
            line-height: 30px;
            position: relative;
            h5{
                float: left;
            }
            i{
                float: right;
            }
            &:hover, &:focus
            {
                color: $body-color;
                
                &::after
                {
                    opacity: 1;
                }
            }
            
            
        }
    }
    @media all and(max-width: 769px){
        .channels-list{
            height: 250px;
        }
    }

我的错误部分的 HTML 代码:

<section class="channels-list">
            <header class="channels-list-header focusable">
                <h5>Text Channels</h5><i onclick="test()" id="new" class="fa fa-plus"></i>
            </header>
            
            <ul class="channels-list-text" id="texts">
                <li class="channel focusable channel-text active">
                    <a><span class="channel-name">general</span></a>
                    <button class="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
                    <button class="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
                </li>
                
                <li class="channel focusable channel-text">
                <a href="/dashboard"><span class="channel-name">projects</span></a>
                    <button class="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
                    <button class="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
                </li>
                <li class="channel focusable channel-text ">
                <a href="/about"><span class="channel-name">about</span></a>
                    <button class="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
                    <button class="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
                </li>
                <li class="channel focusable channel-text ">
                <a href="/contact"><span class="channel-name">contact</span></a>
                    <button class="button" aria-label="Invite"><svg><use xlink:href="#icon-invite" /></svg></button>
                    <button class="button" aria-label="settings"><svg><use xlink:href="#icon-channel-settings" /></svg></button>
                </li>
            </ul>
</aside>

我真的希望有人能告诉我问题可能出在哪里,或者帮助我解决这个问题。

干杯! 迪瓦尼

标签: htmlcsssassoverflowresponsive

解决方案


推荐阅读