【问题标题】:What could cause content to revert on a page refresh?什么可能导致内容在页面刷新时恢复?
【发布时间】:2015-02-23 03:46:00
【问题描述】:

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

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

嵌套的div 包含文本,它的height100px

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

我通过使用:

position: absolute;

bottom: 0;

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

但是!

我遇到的问题是,当我在浏览器中刷新页面时,我想要定位在容器底部的嵌套 div div 会恢复到之前的位置。

有谁知道,为什么会发生这种情况?

下面我列出了我的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;
    }

【问题讨论】:

    标签: jquery html css ruby-on-rails


    【解决方案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 -->

    【讨论】:

    • 感谢您的回复。我已经尝试过该解决方案。但是它不起作用。
    【解决方案2】:

    哈!所以我必须运行这些命令,它解决了我的问题!

    rake assets:clobber
    
    rake assets:precompile
    

    我终于解决了这个问题,我一直有。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-06-13
      • 1970-01-01
      • 2016-04-30
      • 1970-01-01
      • 1970-01-01
      • 2013-06-23
      • 2017-04-14
      • 2022-01-19
      相关资源
      最近更新 更多