Question

我有一个div是一个面板，我想在身体上涂上黑色背景颜色，当我这样做时它会留下100 px的白色空间

我认为发生这种情况是因为在我的CSS中我定义了

.Stock{
    min-height:600px;
    height:600px;
}

但是我希望div能够与完美尺寸相匹配，如果我切割尺寸变化的css，我想保持尺寸并填充白色空间，我该怎么做？

这是特定div的html

 <div class="panel panel-default Stock">
                    <div class="panel-heading panel-heading-custom clearfix">
                        <div>
                            Controlo de stock
                            <div class="pull-right">
                                <a href="#Avisos"><img alt="" class="warningImg" height="20" src="../warning.png" width="20"></a>
                            </div>
                            <div class="pull-right">
                                <h4 id="numberWarnings"></h4>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body ProdutosTodos">
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p><a class="editar" href="#">editar</a>                                <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeIceTea"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeCroissant"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeKitKat"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeKinderBueno"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeWatter"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeBubbleGums"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                        <div class="col-md-6 SeccaoProduto">
                            <p class="productName"></p>
                            <p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
                            <p id="quantidadeCheaps"></p><a class="editar" href="#">editar</a> <a href="#" id="eliminar">eliminar</a>
                        </div>
                    </div>
                    <form action="" class="form-horizontal" id="formularioEdicao" name="formularioEdicao">
                        <div class="col-md-offset-1">
                            <a href="#" id="PageBack"><span class="glyphicon glyphicon-arrow-left"></span></a>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-offset-1 col-md-2" for="">Produto</label>
                            <div class="col-md-8">
                                <input class="form-control" id="EditarNomeProduto" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-offset-1 col-md-2" for="">Quantidade</label>
                            <div class="col-md-offset-1 col-md-6">
                                <input class="sliderProducts" type="range">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10">
                                <button class="btn btn-default" id="GuardarEdicao">Guardar</button>
                            </div>
                        </div>
                    </form>
                </div>

Answer 1

你不必使最小高度和高度相同。试试这个：

.Stock {
  min-height: 600px;
  height: 100%;
}

或者也许：

.Stock {
  min-height: 600px;
  height: 700px;
}

Answer 2

您遇到的问题来自.panel中的panels.less：

.panel {
    margin-bottom: 20px; // <-- Your background-color will not fill 100%
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

您显示的图像看起来不像100px。尝试设置margin-bottom: 0;。

Answer 3

使用此CSS。它会解决你的问题：

.panel {
  background: black;
  margin-bottom: 0px;
  min-height: 600px;
  height: 700px;
}

背景颜色不会填满整个div

3 个答案: