Question

我正试图让absolute红色div获得全身高度。但由于other div，身体似乎比他应该得到的身高要短很多。

HTML

<div class="abs"></div>
<div class="other">
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
</div>

CSS

html,body
{
  height:100%;
  width:100%;
  margin:0;
}
.abs
{
    background-color:red;
    height:100%;
    width:100%;
    position:absolute;
}
.other
{
  height:100%;
  width:100%;
  border:solid black 3px;
  box-sizing:border-box;
}
.toCenter
{
  height:600px;
  width:600px;
}

Answer 1

如果您添加position:fixed而不是position: absolute;，div将继续滚动页面。它可能会让你得到你想要的结果。

Answer 2

您可以使用此jQuery代码

将您的元素放入正文中

$(document).ready(function(){
    var bodyHeight = $(window).height();
    $('your element').height(bodyHeight);
});

<强>样本

$(document).ready(function(){
  var bodyHeight = $(window).height();
  $('html,body').height(bodyHeight);
});

html,body
{
  margin:0;
}
.abs
{
    background-color:red;
    height:100%;
    width:100%;
    position:absolute;
    top: 0;
    left: 0
}
.other
{
  height:100%;
  width:100%;
  border:solid black 3px;
  box-sizing:border-box;
}
.toCenter
{
  height:600px;
  width:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="abs"></div>
<div class="other">
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
  <div class="toCenter"></div>
</div>

Answer 3

试试这个

亲爱的如果你想将绝对位置设置为div，那么你必须设置父div的相对位置，如果没有父div，那么你也可以设置相对于body的位置。
因为绝对位置的某些时间工作取决于父元素的位置。

body{
  position : relative;
}
.abs
{
    background-color:red;
    height:100%;
    width:100%;
    position:absolute;
}

Answer 4

width和height属性可以替换为top，left，right和bottom规则：

.ans {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这应该有效，这是我在代码中总是使用的方法。请注意，div不再填充父级，而是填满整个页面。

绝对div不占100％的身体

4 个答案: