Question

我正在开发一个rails应用程序并包含一些自定义jquery。

我有一个div嵌套在另一个div中。

嵌套div包含文字，其height为100px。

我希望嵌套的div位于容器div的最底部。

我通过使用：

实现了这一目标

position: absolute;

bottom: 0;

在我的custom.css.scss中。这个解决方案很有效。

无论其！

我遇到的问题是，当我在浏览器中刷新页面时，我希望位于容器div底部的嵌套div将恢复为之前的位置。< / p>

有谁知道，为什么会发生这种情况？

下面我列出了div的代码。容器和嵌套。

HTML

<a href="#">
    <div class="container">
        <div class="nested">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor...</p>
        </div><!-- end div .nested -->
    </div><!-- end div .wrapper -->
</a><!-- end anchor tag -->

CSS

    .container {
    background: #FFFFFF;
    padding: 0px;
    width: 265px;
    height: 250px;
    border-top: 5px solid #FAAA2C;
    }

    .nested {
    background-color: #FFFFF2;
    margin-top: 0px;
    height: 100px;
    bottom: 0;
    position: absolute;
    color: #000000;
    }

Answer 1

添加位置：相对于.container类。这应该解决它。 JSFiddle示例：http://jsfiddle.net/cw6dotja/

.container {
    background: #FFFFFF;
    padding: 0px;
    width: 265px;
    height: 250px;
    border-top: 5px solid #FAAA2C;
    position:relative;
    }

    .nested {
    background-color: #FFFFF2;
    margin-top: 0px;
    height: 100px;
    bottom: 0;
    position: absolute;
    color: #000000;
    }

<a href="#">
    <div class="container">
        <div class="nested">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor...</p>
        </div><!-- end div .nested -->
    </div><!-- end div .wrapper -->
</a><!-- end anchor tag -->

Answer 2

HA！因此，我必须运行这些命令并解决我的问题！

rake assets:clobber

rake assets:precompile

我终于解决了这个问题，我一直在做。

什么可能导致内容在页面刷新时恢复？

2 个答案: