小编Hen*_*ell的帖子

我正在使用绝对定位让div填充整个浏览器窗口。但是，我不想将其与有时在那里且有时不在的粘性div结合使用。

为了使事情更清晰，请查看以下jsFiddle：http : //jsfiddle.net/henrikandersson/aDdRS/

我希望“顶部”，“左侧”和“子标题”始终保持不变。我还希望“内容” div填充窗口的剩余内容。但是，有时我想在“内容”之前显示“警报” div。到目前为止，一切都很好，您可以在jsFiddle中看到。但是，我希望“警报”坚持“子标题”并在滚动时停留在该位置。如您所见，如果您调整窗口大小，那么“警报”将随“内容”一起滚动-我不希望这样。

有人知道如何解决这个问题吗？

编辑：我在我的jsFiddle中进行了更改，我将“警报”放置在应有的位置（在子标题和内容区域之间）。如您所见（http://jsfiddle.net/henrikandersson/aDdRS/12），由于content-area具有top：20px，所以它不会向下推“ content-area”。而且我不能设置top：40px，因为“ alert”应该可以改变高度，并且我希望内容区域在有或没有上述警报的情况下都具有相同的css。

编辑＃2：此问题处理相同的问题，但也没有该问题的解决方案。好像不使用JavaScript是不可能的： 可变高度滚动div，相对于可变高度同级放置

所以,我遇到了一个问题,我一直想弄清楚.我在DOM结构中得到了一行额外的文本(或者看起来似乎如此),据我所知,浏览器会添加这些文本.这种情况发生在我运行代码的所有浏览器中(IE8,IE9,Chrome 20,Firefox 11),我想删除它.

这是我的HTML:

<div id="wrapper">
    <div id="inner">
        <div class="item">
            content
        </div>
    </div>
</div>?

这是我的CSS:

#wrapper {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.item {
    float: left;
    width: 171px;
    position: relative;
    background: #fc0;
}

这是一个显示我的问题的jsfiddle:http://jsfiddle.net/henrikandersson/wMg2m/

正如您所看到的,顶部和黄色项目之间存在间隙,据我所知,这是由#inner-div上方不应该存在的文本行引起的.

所以我得到了这个输入字段,我希望它是34px高(边框2px +填充2*10px +文本12px),但它最终高于:

• Firefox 15中的37px
• 37px在Chrome 22中
• 在IE9中36px

问题:为什么我的输入字段不是34px高？

HTML/CSS

<input type="text" class="input" placeholder="Why is this not 34px high?">?

<style>
    .input {
    border: 1px solid #000;
    font-family: Arial;
    font-size: 12px;
    padding: 10px;
    width: 200px;
}?
</style>

小提琴

更新:定义行高(12px)和设置框大小(边框)没有帮助 - 更新小提琴