Css 如何定位div'；s和按钮是否正确

在这里善良的人们的帮助下，我得到了一个相当不错的模型：

中间有一个主文档，除此之外还有一个评论部分

这看起来很合理，但有两个问题

当文档变得不那么高时，注释的位置实际上并不正确。它应该是顶部、中间和底部。但目前（在FireFox中，这是最重要的）当文档高度降低时，中间部分进入底部部分

我应该在代码中更改什么

另一个问题是“下一步”按钮。我想把它放在右边，但我没有让它工作

我试过：

  button.next {
    background:                 #84a0C4;
    border-radius:              10px;
    clear:                      both;
    color:                      #FFFFFF;
    float:                      right;
    font-size:                  200%;
    overflow:                   hidden;
  }

但这会将按钮放在右边，但也会使注释部分变大，并在不需要时提供一个滚动条

编辑 对于按钮问题，我发现了一个漏洞。使用上述样式并添加一些中断，如：

<button class="next" id="next">Next</button>
<br/><br/><br/>

下一步

解决了按钮问题。不是很整洁，所以如果有更好的方法

要查看不带hack的float的问题，请执行以下操作：

关于对齐问题，此图片显示：

---

提问被合并为“始终检查引用”，而不是介于“简短…”和“始终检查…”之间。

您必须为注释div选择最小最小高度，因为您始终会遇到这个问题。 我还在css文件中发现了一些奇怪的定位逻辑，包括Y比例的转换。。。不知道你为什么需要这个。它可能会在IE浏览器中引起很多麻烦

无论如何，这是小提琴->

总结一下我对CSS文件的修改：

添加：

#comment
{   position:relative; 
    min-height:250px; 
    height:100%; 
}

 .middle {
          position: absolute;
          border:1px solid red;
          top: 40%;

      }
 .bottom {
          position: absolute;
          bottom: 0px;
      }

已修改：

#comment
{   position:relative; 
    min-height:250px; 
    height:100%; 
}

 .middle {
          position: absolute;
          border:1px solid red;
          top: 40%;

      }
 .bottom {
          position: absolute;
          bottom: 0px;
      }

编辑： 只加了一点就成功了

.bottom { position: absolute; bottom: 0px; width: 99%; /* .底部{ 位置：绝对位置； 底部：0px； 宽度：99%；/*

---

这样按钮就不会出错。

你能准确地说明你想要的输出吗，读几遍，但恐怕无法计算出来。对于按钮，请使用

float:right

float:right，因为按钮似乎可以正常工作。检查此项：FroClient:不，至少在Linux中的FireFox上不可以：