我正在构建一个布局如下所示的 Electron 应用程序:
|标题栏 |
|第 1 列|栏 2|栏 3|
|底栏 |
固定顶部和底部栏之间的主视图中将有 3 列，而这 3 列是可 y 滚动的，并且每列都嵌入了单独的 html。
这是我的布局的 html 和 SCSS 代码，但所有列都粘在顶部并被标题栏隐藏，底部栏甚至没有显示。 有什么办法解决这个问题吗？谢谢!
HTML
<body>
<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2” class="col-4 main-col">
<button id="btn-img-2” type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3” class="col-4 main-col">
<button id="btn-img-3” type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">
</div>
</body>
SCSS
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
position: fixed;
left: 0;
top: 0;
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
}
#bottom-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
}
最佳答案
检查这段代码
同时将”更改为“
html {
}
body {
min-width: map-get($base, width);
background-color: map-get($base, background);
overflow-x: hidden;
}
#main-screen{
display:block;
position:relative;
}
.main-col{
padding: 0em;
height: 100%;
color: #3d02bd;
width:33.33%;
float:left;
overflow-y:scroll;
}
#main-col-1{
background-color: #e25bff;
}
#main-col-2{
background-color: #ddb1ff;
}
#main-col-3{
background-color: #fbefff;
}
.btn-img{
color: #ffffff;
background-color:#3d02bd;
}
#top-bar {
width: 100%;
margin-bottom: 0;
background-color: #2a095f;
color:#ffffff;
border: 0;
font-size: 3.5em;
letter-spacing: 0.1em;
opacity: 0.9;
margin-bottom:15px;
}
#bottom-bar {
width: 100%;
text-align: center;
margin-bottom: 0;
background-color: #3d02bd;
color:#ffffff;
border: 0;
font-size: 2.5em;
letter-spacing: 0.1em;
margin-top:15px;
display:inline-block;
}<div id="top-bar" class="row h-15">
app title
</div>
<div class="container-fluid">
<div id="main-screen" class="row">
<div id="main-col-1" class="col-4 main-col">
<button id="btn-img-1" type="button" class="btn btn-img btn-lg">btn 1</button>
</div>
<div id="main-col-2" class="col-4 main-col">
<button id="btn-img-2" type="button" class="btn btn-img btn-lg">btn 2</button>
</div>
<div id="main-col-3" class="col-4 main-col">
<button id="btn-img-3" type="button" class="btn btn-img btn-lg">btn 3</button>
</div>
</div>
</div>
<div id="bottom-bar" class="row h-20 text-center" style="margin-bottom:0">bottom bar
</div>关于html - 使用 Bootstrap 4 在 Electron 中折叠布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52641814/