html - 如何摆脱屏幕底部的空白区域?

标签 html css twitter-bootstrap

问题

enter image description here

我的屏幕底部有这个讨厌的空白区域,即使我执行 margin-bottom: 0padding-bottom: 0,它也不会消失>.

如果有人能去掉底部的这个空白区域,将不胜感激!

我的代码

HTML

<div class="container-fluid no-lr-padding no-b-padding">
 ....
<div id="Menu" class="row-fluid no-b-padding">
            <div id="Menu-Header" class="header">
                <h1>Problems</h1> 
            </div>
            <div class="panel-group" id="problem-panels">
                <div class="panel panel-default top-panel">
                    <div class="panel-heading" data-toggle="collapse" href="#collapse1">
                        <h4 class="panel-title">
                            Cox Subtraction Level 1c
                        </h4> 
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul class="nav nav-pills">
                                <li class="active"><a>11</a></li>
                                <li><a>12</a></li>
                                <li><a>13</a></li>
                                <li><a>14</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse2">
                            Cox Addition Level 3b
                        </h4> 
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">panel body 2</div>
                    </div>
                </div>
                <div class="panel panel-default bottom-panel">
                    <div class="panel-heading">
                        <h4 class="panel-title" data-toggle="collapse" href="#collapse3">
                            Cox Subtraction Level 2a
                        </h4> 
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">panel body 3</div>
                    </div>
                </div>
            </div>
        </div>
</div>

CSS

.no-b-padding{
    padding-bottom: 0;
    margin-bottom: 0;
}

JSFiddle

最佳答案

您需要从问题面板 div 中删除底部边距:

#problem-panels {
  margin-bottom:0;
}

jsFiddle example

关于html - 如何摆脱屏幕底部的空白区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38382092/

相关文章:

html - 如何水平居中 Bootstrap 按钮组

javascript - RactiveJS:数据绑定(bind)文本区域导致 "cannot call removeChild with null"

javascript - window.open(url) 不在同一选项卡中打开新网页

HTML/CSS 图像不换行

jquery - Bootstrap : How to fade and then hide something using the default 'fade' , 'hide' 、 'in' 类?

css - 在 Bootstrap 容器上居中(垂直和水平)Div

html - 元素收缩和增长与CSS

javascript - 通过 javascript 创建列表,为每个项目的 onclick 函数使用不同的参数

css - 使用 Angular 2 向 li 组添加和删除样式

css - Web Safe Font Weights -- 如何变细?