1. 首页
  2. 问题列表
  3. 为什么Overflow-y:auto不创建滚动？
提问者：小点点

为什么Overflow-y:auto不创建滚动？


我正在尝试开发一个网站，与CSS Flexbox，与左侧边栏（固定），并与页面的右侧能够滚动，根据内容，但即使启用overflow-y:auto后，页面的右侧不滚动

我在正文中使用overflow-y:hidding，在右侧内容中使用overflow-y:auto。

null

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.outside {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-basis: auto;
}

.sidebar {
  flex: 1;
  list-style: none;
  text-decoration: none;
  left: 0;
  width: 20%;
  height: 100vh;
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  flex-basis: auto;
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  overflow-y: auto;
  padding: 2%;
  flex: 1 16%;
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}
<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class="sidebar">
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

  </div>
</div>

null

请帮我理解这一点，谢谢。


共2个答案

匿名用户

您的代码中有很多内容，包括重复和不必要的规则。

例如，将.sidebar声明应用于div及其子ul是不必要的，而且会适得其反。

我清理了一下。

不需要固定定位。 在body元素上不需要溢出:隐藏。

null

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

body {
  font-family: 'Nunito Sans', sans-serif;
  overflow-y: hidden;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box; /* new */
}

.outside {
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: nowrap;  */
  /* flex-basis: auto;  */
  height: 100vh; /* new */
}

.sidebar {
  flex: 1;
  /* list-style: none; */
  text-decoration: none;
  /* left: 0; */
  /* width: 20%; */
  /* height: 100vh; */
  background-color: #666666;
}

.sidebar header {
  font-size: 1.7rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  background-color: #777777;
  user-select: none;
}

.sidebar ul a {
  height: 100%;
  width: 100%;
  line-height: 4rem;
  font-size: 1.2rem;
  color: white;
  padding-left: 2rem;
  text-decoration: none;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(255, 255, 255, .2);
}

ul li:hover a {
  font-weight: bold;
}

.products {
  /* flex: 1; */
  display: flex;
  flex-wrap: wrap;
  flex-basis: 80%; /* adjustment */
  overflow-y: auto;
  overflow-x: auto;
}

.product-card {
  display: flex;
  min-width: 6rem;
  flex-direction: column;
  /* overflow-y: auto; */
  padding: 2%;
  /* flex: 1 16%; */
  background-color: #FFF;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.product-image img {
  width: 100%;
}

.product-info {
  margin-top: auto;
  padding-top: 20px;
  text-align: center;
}

h5 {
  font-weight: 500;
  line-height: 1.7em;
}

h6 {
  color: #666;
  font-size: 14px;
}
<div class="outside">
  <div class="sidebar">
    <header>Apalog</header>
    <ul class=""><!-- remove duplicate class -->
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">My Catalog</a></li>
      <li><a href="#">Full Catalog</a></li>
    </ul>
  </div>
  <div class="products">
    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

    <div class="product-card">
      <div class="product-image">
        <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
      </div>
      <div class="product-info">
        <h5>Winter Jacket</h5>
        <h6>$99.99</h6>
      </div>
    </div>

  </div>
</div>>

匿名用户

为了使右侧可以滚动，您应该将position:fixed添加到左侧导航栏，并从您的身体上移除overflow-y:hidded，但是您的导航栏在680px屏幕宽度时有另一个问题，您应该使用媒体查询使其完全响应。

但在桌面上我想是你想要的。

null

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');

    body {
        font-family: 'Nunito Sans', sans-serif;
        /* I removed from here overflow-y hidden */
    }

    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }

    .outside {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex-basis: auto;
        
    }

    .sidebar {
        flex: 1;
        list-style: none;
        text-decoration: none;
        left: 0;
        position: fixed; /* added position: fixed */
        width: 20%;
        height: 100vh;
        background-color: #666666;
    }

    .sidebar header {
        font-size: 1.7rem;
        color: white;
        text-align: center;
        line-height: 5rem;
        background-color: #777777;
        user-select: none;
    }

    .sidebar ul a {
        height: 100%;
        width: 100%;
        line-height: 4rem;
        font-size: 1.2rem;
        color: white;
        padding-left: 2rem;
        text-decoration: none;
        box-sizing: border-box;
        border-bottom: 1px solid rgb(255,255,255,.2);
    }

    ul li:hover a {
        font-weight: bold;
    }

    .products {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        flex-basis: auto;
        overflow-y: auto;
        overflow-x: auto;
    }

    .product-card {
        display: flex;
        min-width: 6rem;
        flex-direction: column;
        overflow-y: auto;
        
        padding: 2%;
        flex: 1 16%;

        background-color: #FFF;
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
    }

    .product-image img {
        width: 100%;
    }

    .product-info {
        margin-top: auto;
        padding-top: 20px;
        text-align: center;
    }

    h5 {
        font-weight: 500;
        line-height: 1.7em;
    }

    h6 {
        color: #666;
        font-size: 14px;
    }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Apalog</title>
            <link rel="stylesheet" href="Style/main.css">
            <script src=""></script>
        </head>
        <body>
    
            <div class="outside">
                <div class="sidebar">
                    <header>Apalog</header>
                    <ul class="sidebar">
                        <li><a href="#">Dashboard</a></li>
                        <li><a href="#">My Catalog</a></li>
                        <li><a href="#">Full Catalog</a></li>
                    </ul>
                </div>
                <div class="products">
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$99.99</h6>
                        </div>
                    </div>
    
                    <div class="product-card">
                        <div class="product-image">
                            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/">
                        </div>
                        <div class="product-info">
                            <h5>Winter Jacket</h5>
                            <h6>$100</h6>
                        </div>
                    </div>
    
                </div>
            </div>
        </body>
    </html>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS