我正在使用我的大学元素 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; 隐藏主体滚动但它对我不起作用，无法滚动 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>最佳答案
我在你的代码中发现了一个 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%;
}
关于css - bootstrap 4主体滚动问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45605500/