Background color does not fill entire div - html

Question

I have a div that is a panel, and I want to apply to the body a black background color, when I do that it left around 100 px white space
I think that happens because in my css I defined
.Stock{
min-height:600px;
height:600px;
}
but I want the div to be that big it matches the perfect size, if I cut this css the size changes, I want to maintain the size and have that white space filled, how can I do that ?
here is the html of the specific div
<div class="panel panel-default Stock">
<div class="panel-heading panel-heading-custom clearfix">
<div>
Controlo de stock
<div class="pull-right">
<img alt="" class="warningImg" height="20" src="../warning.png" width="20">
</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> eliminar
</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> eliminar
</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> eliminar
</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> eliminar
</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> eliminar
</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> eliminar
</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> eliminar
</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> eliminar
</div>
</div>
<form action="" class="form-horizontal" id="formularioEdicao" name="formularioEdicao">
<div class="col-md-offset-1">
<span class="glyphicon glyphicon-arrow-left"></span>
</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

The issue you are running into is coming from .panel in 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);
}
The image you have shown does not look like 100px. Try setting margin-bottom: 0;.

Answer 2

Use this CSS. It will fix your problem:
.panel {
background: black;
margin-bottom: 0px;
min-height: 600px;
height: 700px;
}

Answer 3

You don't have to make the min-height and the height the same. Try this:
.Stock {
min-height: 600px;
height: 100%;
}
or maybe:
.Stock {
min-height: 600px;
height: 700px;
}