Question

我有这个相当不寻常的问题（在我询问别人之后我明白了），似乎我的-tags不理解其他元素使用了多少屏幕，因此将元素推出屏幕。
我认为它可能与使用position：fixed有关，但是在删除position-part时似乎没有解决它。

这是主要的标记似乎有问题，我真的看不出任何错误。

<div id="search">
    <div id="searchfield">
        <span id="searchinput">
            <input type="text" id="s" name="s" />
        </span>
        <button>Search</button>
    </div>
    <div id="searchresults">
        <ul class="longlist">
        </ul>
    </div>
</div>

问题最好见于jsFiddle #search #search #search #search> 。
由于我真的不知道出现了什么问题，因此任何使用谷歌的尝试都让我对问题的确无法解决。

我已经尝试删除任何修改它的JS，因为我们可以看到jsFiddle根本没有运行任何JS，而且我的标记/ CSS仍然不起作用。

#search 的高度在这个小提琴中设置为400px，以更好地显示缺陷。但是当它是100％时会发生同样的错误（它是生产代码中应该具有的值）。

有谁知道为什么会这样？

Answer 1

这是由溢出问题引起的。 div“#searchfield”正在推动其他内容。

通过删除“height：400px;”行将高度设置为“auto”在“div＃search”上设置一个固定的高度“div＃searchresults”解决了这个问题。

#search{
   height: 400px;
}

在“div＃search”之外使用“div＃searchfield”也可以。

<div id="searchfield">...</div>
<div id="search">...</div>

这些方法表明溢出问题是由混合相对和绝对高度引起的。你应该把你的一些与高度相关的样式从“div＃search”移到“div＃searchresults”来解决这个问题。

Answer 2

似乎在

工作

 #search{
   height: 100%;
 }

没有？

链接：

http://jsfiddle.net/KX9BV/8/

DIV正在被其他DIV推出窗外

2 个答案: