Question

我想在页面末尾只看到div的一半。我尝试应用bottom:-100px或margin-bottom:-100px或padding-bottom:-100px，但无效。

我该怎么办？

这是我的JSFIDDLE：https://jsfiddle.net/cuxyrfh8/6/

div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}

Answer 1

div正好在视口外100px。我假设你不想要那种滚动行为？您可以实现宽度overflow: hidden;。

修改1 ：如果身体的高度大于视口，则可以设置position: relative;以使div的位置朝向身体。

编辑2 ：如果你想在向下滚动的主体上使用halve div，你需要一个包装元素并将溢出和位置规则应用于它。

＆＃13;

body {
  margin: 0;
}
.wrapper {
  height: 1000px;
  overflow: hidden;
  position: relative;
}
.wrapper div {
  background: pink;
  position: absolute;
  height: 200px;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  width: 400px;
  border: 5px black solid;
  bottom:-100px;
}

＆＃13;

<div class="wrapper">
  <div></div>
</div>

＆＃13;

Answer 2

负填充不根本不起作用。使用包装元素：

HTML

<div class="wrapper">
    <div class="thediv">
    </div>
</div>

CSS

.wrapper {
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
.thediv {
    background: pink;
    position: absolute;
    height: 200px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    width: 400px;
    border: 5px black solid;
    top: 0;
}

<强> look here

Answer 3

您可以通过将元素的position从aboslute更改为fixed来实现您的目标，如下所示：

div{
    background:pink;
    border:5px black solid;
    bottom:-100px;
    height:200px;
    left:0;
    margin:0 auto;
    position:fixed;
    right:0;
    width:400px;
}

<div></div>

Answer 4

overflow: hidden会将div移动到底部100px，因此会出现滚动条（将显示完整的div）。

要避免在页面的body上使用body { overflow: hidden; } div { background: pink; position: absolute; width: 400px; height: 200px; margin-left: auto; margin-right: auto; left: 0; right: 0; border: 5px black solid; bottom: -100px; } div:hover { bottom: 0px; }。

<div>
</div>

{{1}}

身体外的绝对位置的div

4 个答案:

HTML

CSS