引导4体滚动发行

我用我的大学项目Flexbox Grid我加入 <div class="header"> <div id="content-top">，<div id="content">和<div class="footer">。引导4体滚动发行

<div class="header">是固定的，<div id="content">可以scroll-y 和footer是固定的，他们都工作，但我有一些问题，身体总是可以滚动我试图掩盖使用overflow: hidden;体滚动，但它不是为我工作，不能滚动content一部分，我该如何解决感谢

/* 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 ----------------------------------*/

<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>

来源

2017-08-10 core114

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

body #add-newbookings { 
    overflow: hidden; 
} 

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

为了解决它

要么使用

body#add-newbookings { 
     overflow: hidden; 
} 

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

或

body { 
     overflow: hidden; 
} 

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

来源

2017-08-10 06:39:54

先生感谢您的回答 – core114

如果它解决了你的问题。请接受它作为答案。将不胜感激 –

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

来源

2017-08-10 06:39:12

先生感谢您的回答 – core114

引导4体滚动发行

回答

相关问题