将img保留在页面底部

Question

我知道这是多余的问题，但我看到的答案令人难以置信。这么简单的任务多行？没办法。

我想在页面末尾保留test.dict（不在显示屏幕的末尾 - 我现在遇到此问题）。

当前，错误的代码：

if __name__ == "__main__":
    test0 = Test()
    test1 = Test()
    test2 = Test()

    jobs = list()
    jobs.append(mp.Process(target=test0.fill_dict, args=()))
    jobs.append(mp.Process(target=test1.fill_dict, args=()))
    jobs.append(mp.Process(target=test2.fill_dict, args=()))

    for job in jobs:
        job.start()
    for job in jobs:
        job.join()

    print "RESULTS:"
    print test0.dict
    print test1.dict
    print test2.dict

我需要一种情况，当我在页面底部滚动时，我将无法看到图像。

我无法相信CSS中没有img

这样的选项

编辑：

Answer 1

认识CSS transform属性 - 应用transform: translateY(100%)。

见下面的演示：

#footerimg {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index:-2;
  transform: translateY(100%);
}

<img id="footerimg" src="http://placehold.it/200x200"/>

修改：

查看添加到问题中的图像，我认为您不需要定位 - 只需将img作为html标记中的最后一个元素。

可能的解决方案是：

.content {
  height: 120vh;
}
section {
  text-align: right;
}
img {
  vertical-align: top;
}

<section class="content"></section>
<section>
  <img id="footerimg" src="http://placehold.it/200x200" />
</section>

Answer 2

您需要在body的末尾定义相对的块级元素。这将创建新的块格式化上下文，并且所有内部绝对定位元素将相对于它放置。

查看代码段示例：

public void populateHiddenSheet(int categoryNumber, int genderNumber, ArrayList<Player> players,
        ArrayList<Player> overankedPlayers)
{
    DataValidationConstraint constraint = null;
    DataValidationHelper validationHelper = null;
    String name = new String();

    Sheet hiddenSheet = workbook.getSheet(HIDDEN_SHEET_NAME);

    // Creates the hidden sheet if it does not exist
    if (hiddenSheet == null)
    {
        hiddenSheet = workbook.createSheet(HIDDEN_SHEET_NAME);
        workbook.setSheetHidden(workbook.getSheetIndex(HIDDEN_SHEET_NAME), Workbook.SHEET_STATE_VERY_HIDDEN);

    }

    // Adds the list of player names in the sheet
    for (int i = 0; i < players.size(); i++)
    {
        name = players.get(i).getName();

        POIExcelFileProcessor.createCell(hiddenSheet, columnNumber, i, NAME_PREFIX + name);
    }

    // Sets the validation for the drop-down lists
    validationHelper = hiddenSheet.getDataValidationHelper();
    constraint = validationHelper.createFormulaListConstraint(HIDDEN_SHEET_NAME + "!$" + (char) (columnNumber + 65)
            + "$1:$" + (char) (columnNumber + 65) + "$" + (players.size() + overankedPlayers.size() + 1));

    listConstraints.add(constraint);
}

body {
  width: 100%;
}
.blk1 {
  display: block;
  width: 100%;
  height: 500px;
  background: orange;
}
.blk2{
  display: block;
  width: 100%;
  height: 300px;
  position: relative;
  background: #9c9;
}
img.btm {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: opacity 1s ease; 
  
}
.blk2:hover .btm {
  opacity: 1;
}

这是另一种解决方案：

<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>

body {
  width: 100%;
  position: relative;
}
.blk1 {
  display: block;
  width: 100%;
  height: 200vh;
  background: orange;
}
body:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background-image: url('//placehold.it/100/100');
}

因此，您只需将<div class="blk1"> </div>添加到position: relative css样式

即可

body

并添加body { position: relative; } ：

body:after

Answer 3

你的问题让你有点困惑，你在问题中提到的那样：“当我在页面底部滚动时，我将无法看到图像。”

然后我认为你不需要任何努力你只需要在页脚容器下面放置图像，当你下到底时你会在页面底部找到它，这是非常传统的方式，不需要任何棘手的代码。