文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >不带滚动条的flex滚动

问不带滚动条的flex滚动
EN

Stack Overflow用户
提问于 2018-06-08 02:10:42
回答 1查看 101关注 0票数 0

我正在尝试让我的主要区域容器(带有overflow: auto)滚动，但没有额外的滚动条。目前，容器有一个额外的滚动条。我想用主滚动条来上下滚动。我确定我必须做一个稍微不同的布局才能让它工作。我更喜欢flexbox解决方案，但是我对任何方法都是开放的。

https://codepen.io/marti2221/pen/oyxZzx

代码语言：javascript
复制
<section id="container" >
<header id="header" >
  <div class="header-top">
    <button class="order-btn">Order</button>
    <div class="icon-1">
      <div class="">icon 1</div>
      <div class="">icon 2</div>
    </div>
  </div>
  <div class="header-bottom">

</header>
<article id="content" >
  <div class="main-bg">
    <div class="menu-box">
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
     </div>
  </div>
</article>

</section>

html, body {
height: 100%; 
width: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: lightblue;
}

#container header {
background-color: gray;
height: 200px;
display: flex; 
flex-direction: column; 
}

.header-top {
display: flex; 
justify-content: space-between; 
}

.order-btn {
align-self: flex-start;
}

#container article {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}


.main-bg {
display: flex; 
justify-content: center;
}

.menu-box {
width: 35%; 
border: 1px solid black; 
display: flex;
flex-direction: column; 
}
.top-info-wrapper {
display: flex; 
justify-content: space-between;
}

.icon-1 {
display: flex; 
}

.header-bottom {
display: flex; 
width: 35%; 
}
scroll
flexbox
overflow
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-08 17:18:54

从容器div中删除了flex，因为它不是必需的。还将background-color: lightblue;移到了文章中，而不是容器目录中。还在body标签上添加了margin: 0;。

​

代码语言：javascript
复制
html, body {
height: 100%; 
width: 100%;
margin: 0;
}
#container {
height: 100%;
width: 100%;
}

#container header {
background-color: gray;
  height: 100px;
  position: fixed;
top: 0;
width: 100%;
}

.header-top {
  display: flex; 
  justify-content: space-between; 
}

.order-btn {
  align-self: flex-start;
}

#container article {
background-color: lightblue;
overflow-y: auto;
min-height: 0px;
margin-top: 100px;
}


.main-bg {
  display: flex; 
  justify-content: center;
}

.menu-box {
  width: 35%; 
  border: 1px solid black; 
  display: flex;
  flex-direction: column; 
}
.top-info-wrapper {
  display: flex; 
  justify-content: space-between;
}

.icon-1 {
  display: flex; 
}

.header-bottom {
  display: flex; 
  width: 35%; 

}
代码语言：javascript
复制
<section id="container" >
<header id="header" >
  <div class="header-top">
    <button class="order-btn">Order</button>
    <div class="icon-1">
      <div class="">icon 1</div>
      <div class="">icon 2</div>
    </div>
  </div>
  <div class="header-bottom">
    
</header>
<article id="content" >
  <div class="main-bg">
    <div class="menu-box">
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
      <div class="menu-item">
        <div class="top-info-wrapper">
          <h3>Name</h3>
          <h3>$6.50</h3>
        </div>
        <div class="descr-wrapper">
          <p>this is a paragraph about a menu-item. It should be a few sentances long and take up only space in the box</p>
        </div>
      </div>
     </div>
  </div>
</article>

</section>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50747644

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档