修改

Question

在这里的好人的帮助下，我得到了一个相当不错的模型：http://jsfiddle.net/CecilWesterhof/4kLwK/2

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

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

当文档变得不那么高时，注释的位置并不正确。它应该是顶部，中部和底部。但目前（在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/>

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

要查看没有黑客的浮动问题： How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png

关于对齐问题，此图片显示： wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png

提问被合并为“始终检查参考”，而不是介于“短暂...”和“始终检查......”之间。

Answer 1

您必须为评论div选择最小最小高度，因为您总是会遇到问题。此外，我在你的css文件中发现了一些奇怪的定位逻辑，包括Y尺度的转换...不知道为什么你需要它。它可能会在IE浏览器中造成许多麻烦。

无论如何，这里是小提琴 - ＆gt; http://jsfiddle.net/4kLwK/7/

在摘要中我对CSS文件进行了修改：

<强>加入：

#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%; /*

这样按钮保持正确。

如何正确定位div和按钮

修改

1 个答案:

编辑：