文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >引导4体滚动问题

问引导4体滚动问题
EN

Stack Overflow用户
提问于 2017-08-10 05:54:06
回答 2查看 8K关注 0票数 2

我正在为Flexbox Grid使用我的大学项目我添加了<div class="header"> <div id="content-top">，<div id="content">和<div class="footer">。

<div class="header">是固定的，<div id="content">可以是scroll-y，footer是固定的，他们都在工作，但是我有一些问题，身体总是可以滚动，我一直在用overflow: hidden;隐藏 body 滚动，但是它对我不起作用，不能滚动content部件，我如何修复它谢谢。

​

代码语言：javascript
复制
/* Show it is fixed to the top */

body #add-newbookings  {
  overflow: hidden;
}
#content {
  max-height: calc(100% - 60px);
  overflow-y: scroll;
  padding: 0px 5% !important;
  margin-top: 120px !important;
}


html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.bg-inverse {
  background-color: grey!important;
}

.header {
  width: 100%;
  height:5%;

  background:grey;
  position:fixed;
  top: 0;
}

.footer {
  width: 100%;
  height: 60px;
  background: grey;
  position: fixed;
  bottom: 0;
}

.card {
  position: initial;
}

#content-top {width: 100%;
margin-top: 2em;
padding:1.5%;
  background:white;
  position:fixed;
  top: 0;}


/*--------------------------------------------------Add new booking ------------------------------------*/
/*add-newbooking text fileds*/
#add-newbooking  .form-control {
  display: block;
  width: 100%;
  padding: 0.1rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  color: #464a4c;
  background-color: #f4f4f5;
  background-image: none;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

/*add-newbooking  creditcardbtn*/
#add-creditcard-btn .btn-primary {
  color: #b89981;
  background-color: #f4f4f5;
  border-color: #f4f4f5;
}
/*/add-newbooking  creditcardbtn*/

/*button cansel-confirm*/
#cancel-btn .btn-outline-secondary {
  color: #343636;
  width: 94%;
  background-image: none;
  background-color: #f4f4f5;
  border-color: #f4f4f5;
  margin: 0.5rem 0.5rem;
}
#confirm-btn .btn-outline-secondary {
  olor: #ffffff;
  width: 94%;
  background-image: none;
  background-color: #bda18b;
  border-color: #bda18b;
  margin: 0.5rem 0.5rem;
}
/*/button cansel-confirm*/

.add-text {color: #232323; font-size: 1.2em;}
/*add newbooking  between textfilds space */

/*/add newbooking  between textfilds space */
/*----------------------------------------------------/Add new booking ----------------------------------*/
代码语言：javascript
复制
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body id="add-newbookings">
<div class="header">
<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Dashboard</div>
  <div class="p-2"></div>
  <div class="p-2">Menu</div>
</div>
</div>
<div id="content-top">
  <div class="add-text">
    <div class="d-flex justify-content-center">Add New 
    </div>

  </div>


</div>
<div id="contents">
<div id="add-newbooking">
<div class="card">
  <div class="card-block">
    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">my</div>

      <div class="p-2">  <div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
      </div>
      </div>
    </div>

    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">To</div>

      <div class="p-2"><div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
      </div>
      </div>
    </div>

    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">house

      </div>
      <div class="mr-auto p-2">Add

      </div>
      <div class="p-2">000

      </div>
    </div>



    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">Add


      </div>
      <div class="mr-auto p-2">Add 

      </div>
      <div class="p-2">00.00

      </div>
    </div>



    <hr>



    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">Total A
      </div>

      <div class="p-2">00.00
      </div>
    </div>
  </div>





</div>


<br>
<div class="card">
  <div class="card-block">



    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">Name
      </div>

      <div class="p-2"><div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput-name" placeholder="">
      </div>
      </div>
    </div>


    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">city
      </div>

      <div class="p-2"><div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput-mobile" placeholder="">
      </div>
      </div>
    </div>

    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">country
      </div>

      <div class="p-2"><div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput-email" placeholder="">
      </div>
      </div>
    </div>

    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">email
      </div>

      <div class="p-2"><div class="form-group">

        <input type="text" class="form-control" id="formGroupExampleInput-notes" placeholder="">
      </div>
      </div>
    </div>

</div></div>


<br>


<div class="card">
  <div class="card-block">




    <div class="d-flex justify-content-end">
      <div class="mr-auto p-2">total

      </div>

      <div class="p-2">$00.00
      </div>
    </div>



    <div class="d-flex flex-nowrap">
      <div class="order-last p-2">
        <div id="add-creditcard-btn">
        <button type="button" class="btn btn-primary">Add home  information</button></div>
      </div>
      <div class="p-2"></div>
      <div class="order-first p-2"></div>
    </div>
  </div></div>


<div class="d-flex justify-content-end">
  <div id="cancel-btn">
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
  </div>
  <div id="confirm-btn">
  <button type="button" class="btn btn-outline-secondary">Confirm</button>
  </div>
</div>
</div>
</body>

​

css
twitter-bootstrap
scroll
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-10 06:39:54

我在您的代码中发现的是CSS问题。你有

代码语言：javascript
复制
body #add-newbookings  {
  overflow: hidden;
}

#add-newbookings /* will be considered as child element of body */

来解决它

要么使用

代码语言：javascript
复制
body#add-newbookings  {
      overflow: hidden;
}

#contents {
  overflow: auto;
  height: 100%;
}

或

代码语言：javascript
复制
body {
      overflow: hidden;
}

#contents {
  overflow: auto;
  height: 100%;
}
票数 3
EN

Stack Overflow用户

发布于 2017-08-10 06:39:12

请将<div id="contents">更正为<div id="content">并检查。

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

https://stackoverflow.com/questions/45605500

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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