DIV's被其他DIV的窗口推出

我有這個相當不尋常的問題（在我瞭解其他人時），似乎我的標籤不知道其他人使用了多少屏幕元素，並因此將元素推出屏幕。
我認爲這可能與位置的使用有關：固定，但它似乎並沒有解決它時，刪除的位置部分。DIV's被其他DIV的窗口推出

這是主要的標記，似乎有問題，在我真的似乎無法看到任何錯誤。

<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它似乎#searchresults由#searchfield推出的＃搜尋看得最清楚。
因爲我真的不知道有什麼問題，所以使用Google的任何嘗試都沒有給我的問題真正的答案留下好的答案。

我已經嘗試刪除任何修改所有的JS，並且我們可以看到jsFiddle根本不運行任何JS，並且我的標記/ CSS仍然不起作用。

#search的高度在此小提琴中設置爲400px以更好地顯示缺陷。但同樣的錯誤發生在100％（這是它應該在生產代碼中的值）。

有沒有人知道爲什麼會發生這種情況？

來源

2012-12-01 JoMs

這是由溢出問題引起的。 div「#searchfield」正在推低其他內容。

通過刪除「height：400px;」行將高度設置爲「auto」在「div＃search」上並在「div＃searchresults」上設置一個固定的高度來修復問題。

#search{ 
    height: 400px; 
}

將「div＃searchfield」放在「div＃search」之外也起作用。

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

這些方法表明溢出問題是由混合相對高度和絕對高度造成的。你應該將一些與高度有關的樣式從「div＃search」移動到「div＃searchresults」來解決這個問題。

來源

2012-12-01 14:19:00

感謝，從* DIV＃搜索*移動高度屬性* DIV＃SearchResult所*似乎當我使用靜態的高度，以解決它。但我真的想讓它動態化並使用百分比來使* div＃searchresults *填充屏幕下方的* div＃searchfield *下方的其餘部分。或者它會是一個更好的解決方案，使用JS來設置* div＃searchresults *高度？ – JoMs

@JOMs一個想法是將所有內容都包含在anoter div中（高度爲100％）。 –

我相信我已經用* div＃content *做了這個，或者你認爲代碼中有另一個地方嗎？ – JoMs

似乎在

#search{ 
    height: 100%; 
}

工作沒有？

鏈接：

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

來源

2012-12-01 14:19:39 nerdarama

正如您所看到的，滾動條實際上似乎超出了窗口。用這個[fiddle]（http://jsfiddle.net/KX9BV/9/）可以看到，當滾動到底部時，Foo 19和Foo 20仍然在屏幕之外。 – JoMs

在這種情況下，正如Hello Invader所說的那樣，將#search div的高度設置爲auto並將固定高度設置爲#searchresults可以修復您的問題。 http://jsfiddle.net/KX9BV/19/ – nerdarama

DIV's被其他DIV的窗口推出

回答

相關問題