Question

我已经看到过这样的一些问题，但到目前为止我还没有找到答案。我试图在外部div的底部得到内部div（尽管不完全，我想，就像，底部有5px的边距），但我似乎无法在没有放置位置的情况下完全定位它绝对。但是，如果我这样做，则宽度和居中不再起作用。

我有什么方法可以实现这一目标吗？

这是我的代码：

var height = $('.windows').height()*0.85;
	$('.windows-content').css('height', height);

.windows {
	max-width: 900px;
	width: 70%;
	min-height: 300px;
	height: auto;
	box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
    background-color: #C2C5CA;	
	margin: 0 auto;
}
.windows-content {
	width: 98.5%;
	height: auto;
	box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
    background-color: #FFF;
	margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="windows" id="home-window">
		<div class="windows-content"></div>
	</div>

Answer 1

您可以使用弹性框来获得您想要的结果

请参阅代码段：

var height = $('.windows').height() * 0.85;
$('.windows-content').css('height', height);

.windows {
  max-width: 900px;
  width: 70%;
  min-height: 300px;
  background-color: #C2C5CA;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom:5px;
}

.windows-content {
  width: 98.5%;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="windows" id="home-window">
  <div class="windows-content"></div>
</div>

Answer 2

一个简单的解决方案是将padding-bottom添加到.container div，然后创建一个捕获此填充值的JS变量;那么JS height变量的新值应该是初始高度减去前面提到的padding-bottom。我在代码段CSS中添加了10px的值，但您可以在那里写下您需要的值。

＆＃13;

var height = $('.windows').height();

$('.windows-content').css('height', height);

var bottom = height - 5;

var get_padding_bottom = parseInt( $('.windows').css('padding-bottom') , 10);

height -= get_padding_bottom;

＆＃13;

.windows {
	max-width: 900px;
	width: 70%;
	min-height: 300px;
	box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
  background-color: #C2C5CA;	
	margin: 0 auto;
  padding-bottom: 10px;
}

.windows-content {
	width: 98.5%;
	height: auto;
	box-shadow: 2px 2px 0px 0px #000 inset, -1px -1px 0px 0px #FFF inset;
  background-color: #FFF;
  margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div class="windows" id="home-window">
		<div class="windows-content"></div>
</div>

＆＃13;

将div放在另一个div中而不是绝对的

2 个答案: