css - Bootstrap 4 内容和导航侧边栏重叠问题

标签 css twitter-bootstrap bootstrap-4

我正在为我的大学开发一个应用程序。为此，我使用了 Bootstrap-4。我做4个分区 header,content-top-fat **,**content-bot-fat **,**main-content 和 footer 我试试到 fixed header、content-top-fat、content-bot-fat 和 footer。我只需要滚动 main-content 部分，在我添加侧边栏导航菜单后它看起来不太好它总是 overlap 你可以理解我的代码和图像，请帮助我修复这个问题如何修复这部分并只滚动 main-content 部分，我的 main-content 部分不能滚动，

谢谢

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
body.mainbody {
  overflow: hidden;

  font: 13px/1.7em 'sans-serif';
  font-family: sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bg-inverse {
  background-color: grey !important;
}

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

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

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

}

.main-content{
  height: 85%;
  margin-top:5%;
z-index: -1; overflow-y: scroll;
}

#content-top {
  width: 100%;
  top: 5%;
  height: 5%;
  padding: 1.5%;z-index: -1;
background-color: white;
  position: fixed;
}
#content-top-fat {
  width: 100%;
  top: 5%;
  background-color: white;
  height: 5%;
  padding: 1.5%;
  z-index: 1;
  position: fixed;
}
#content-bot-fat {
  width: 100%;
  top: 10%;  z-index: -1;
  height: 5%;
  padding: 1.5%;
  background:white;
  position: fixed;
}
.p-2 {
  padding: 0.4em 0.5rem !important;
}
#contents {
  /*position: fixed;*/

  overflow-x: hidden;
margin-top: 6.5rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<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"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.




Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with p
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Components
Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
  </div>
</div>

<div class="footer"></div>
</body>

图片 Image

最佳答案

改变你的.sidenav{position:fixed; top:0; 到 .sidenav{position:absolute; top:5%;

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
  }

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
body.mainbody {
  overflow: hidden;

  font: 13px/1.7em 'sans-serif';
  font-family: sans-serif;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.bg-inverse {
  background-color: grey !important;
}

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

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

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

}

.main-content{
  height: 85%;
  margin-top:11%;
z-index: 0; overflow-y: scroll;
}

#content-top {
  width: 100%;
  top: 5%;
  height: 5%;
  padding: 1.5%;z-index: -1;
background-color: white;
  position: fixed;
}
#content-top-fat {
  width: 100%;
  top: 5%;
  background-color: white;
  height: 5%;
  padding: 1.5%;
  z-index: 1;
  position: fixed;
}
#content-bot-fat {
  width: 100%;
  top: 10%;  z-index: -1;
  height: 5%;
  padding: 1.5%;
  background:white;
  position: fixed;
}
.p-2 {
  padding: 0.4em 0.5rem !important;
}
#contents {
  /*position: fixed;*/

  overflow-x: hidden;
margin-top: 5.0rem;
padding: 2%;
}


.sidenav {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 5;
  top: 5%;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="mainbody">
<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"><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span></div>
</div>


</div>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!--/header-->
<div id="content-top-fat">
  <div class="add-text-fat">
    <div class="d-inline-flex ">+</div>
    <div class="d-inline-flex ">Add New Rate Plan</div>

  </div>


</div>
<div id="content-bot-fat">


  <div class="d-flex justify-content-center"><p class="rateplan-date">Thursday, April, 20, 2017
  </p></div>
</div>
<!--content-->
<div class="main-content">
  <div id="contents">
 

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.




Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with p
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.Preprocessor
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.
Bootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

ComponentsBootstrap ships with vanilla CSS, but its source code utilizes Sass, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.

Responsive across devices
One framework, every device.
Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Components
Components
Full of features
With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.
  </div>
</div>

<div class="footer"></div>
</body>

关于css - Bootstrap 4 内容和导航侧边栏重叠问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45651266/

上一篇：css - React-Table列固定宽度破坏了整个表格

下一篇：css - 为什么这个CSS片段可以画出一个三 Angular 形？

相关文章：

css - 如何让css不重复同一个类？

iphone - 当 iPhone 方向从纵向变为横向时保留 HTML 字体大小

javascript - Bootstrap Datepicker - 月份和年份没有间距

修改后忽略的 CSS 文件

javascript - Bootstrap 容器内 100% 宽度的 div

html - 轮播指示器和控件不响应鼠标单击

css - 复选框输入不会与标签一起居中

html - CSS 嵌套 div 高度 100% 不起作用

html - 适合所有屏幕的百分比定位

javascript - jQuery 替代 Div 元素

©2024 IT工具网  联系我们