Question

我希望elements[idx].getText().then(printText);转到页面底部。不短，不长。我寻找一种解决方案，其中main-content-root之前的div不会改变。只有css首选。由于菜单的高度不同，我添加了一些简单的代码来改变菜单的高度。

main-content-root

Answer 1

可以在这里使用Flex：不要犹豫，打开片段un整页并玩大小调整窗口：）

＆＃13;

html,/* 100% inherited from widow's height , then the cascade will take it to .rrot */
body,
.root{
  height: 100%;
  width: 100%;
  margin: 0;
}
.root {
  display: flex;
  flex-flow: column;
}
 
.menu {
  background-color: red;
  height: 50px; /* 200 is too much to show in snippet ... */
}
.main-content-root {
  flex: 1;
  overflow: auto;
}

＆＃13;

<div class="root">
  <div class="menu">
    menu
  </div>

  <div class="main-content-root">
    <div class="content">
      scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>scroll content
      <br/>
    </div>
  </div>
</div>

＆＃13;

Answer 2

对于已修复 solution（不在流程中）：

.main-content-root {
    position: fixed;
    bottom: 0;
}

对于粘性页脚 solution（向下成长）：

html, body, .root {
  height: 100%;
}

.menu {
  min-height: 100%;
  margin: 0 auto;
}

绝对位置 solution（成长）：

.main-content-root {
  position: absolute;
  bottom: 0;
}

Answer 3

如果main-content-root div可以有固定高度，这将有效，将所有页面内容包装在div中

<html>
     <body>
        <div class="menu">
            <!-- All the page content -->
        </div>
        <div class="main-content-root">
        </div>
    </body>
    </html>

CSS

html{
  position:relative; 
  min-height: 100%;
}

html,body{
  margin:0;
  padding:0;
}
.menu{
  margin-bottom:200px; /* Height of main-content-root*/
} 
.main-content-root{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:200px;

}

在页面底部创建一个div

3 个答案: