那些遇到过的问题

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

cor*_*114 12 css twitter-bootstrap bootstrap-4

林开发我的大学的一些应用程序,用于即时消息Bootstrap-4IM使4部分 标题,内容顶发 ,内容僵尸脂肪 ,主要内容和页脚 IM尝试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";
  }
Run Code Online (Sandbox Code Playgroud) 
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;}
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

图片 图片

小智 6

我在你的代码中发现了问题并修复了它.我希望它能帮到你:)

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

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
Run Code Online (Sandbox Code Playgroud) 
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;}
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

Udh*_*tus 5

改变你.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";
  }
Run Code Online (Sandbox Code Playgroud) 
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;}
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

996 次

最近记录：

6 年，8 月 前
相关归档
什么bug会变焦:1; 修复CSS？ 37
如何在填充和边框中使用flex-shrink因子？ 28
适用于Android的chrome中的模糊SVG图像 21
在Rails应用程序中包含Google字体 20
使用<button>元素内的图像 18
结合"column-count"和"display:table"会在Firefox中呈现单列 18
Bootstrap navbar-fixed-top类,不工作 11
在引导程序4中将页脚刷新到页面底部 4
Zend Navigation - 如果孩子处于活动状态,则将父级标记为活动 3
Bootstrap 4 个垂直选项卡和右侧的内容 3
难疑归档
检查shell脚本中是否存在目录 3556
使用JavaScript获取当前网址？ 2882
忽略已提交到Git存储库的文件 2429
在JavaScript中定义枚举的首选语法是什么？ 1982
什么是C ??!??!操作员呢？ 1911
从C#中的枚举中获取int值 1698
什么是TypeScript,为什么我会用它代替JavaScript？ 1637
在jQuery中创建div元素 1500
为什么使用Redux而不是Facebook Flux？ 1126
NP,NP-Complete和NP-Hard有什么区别？ 1064