如何使元素不觸發滾動條？

我有一個固定高度的頁面，661px，橫向模式下iPad上Safari的高度。在iPad上，我不希望它滾動;內容應該完全適合。如何使元素不觸發滾動條？

在一個更高的瀏覽器窗口，但是，我想要一些額外的內容（版權線），顯示661px倍之下。但是，在窗口小於661px高度之前，不應該出現滾動條，即在滾動條出現之前應該剪下頁腳。比661px高

+--------+ +--------+ +--------+^
|  | |  | |  | # 
|  | |  | |  | v 
+--------+ +--------+ 
    Footer 

    (1)   (2)   (3)

我的簡化的標記如下：

<body> 
    <div class="all"> 
    ... main content ... 
    <div class="footer">Copyright!</div> 
    </div> 
</body>

和相應的CSS：

.all { 
    height: 661px; 
    overflow: visible; 
} 

.footer { 
    position: absolute; 
    left: 0px; 
    top: 661px; 
}

這使得所有的元素在正確的地方，但不知何故頁腳仍然貢獻到頁面高度，從而觸發滾動條，即使它坐落在高度較小的元素內。的overflow和height上html，body和.all沒有組合似乎解決這個問題，無論是在Chrome也不在Firefox瀏覽器。

這樣做的正確方法是什麼？

而且我也想問更普遍的問題：如何在窗口滾動條觸發？顯然，如果Chrome瀏覽器顯示html和body具有預期的661px高度，那麼body的高度不僅僅是窗口的高度。

2012-12-09 Thomas

爲什麼不使用條件樣式表？下面的標籤

media="screen AND (max-height:661px)"

添加到樣式表，它僅適用於屏幕觀看，其中的瀏覽器窗口的最大高度爲661px，這將是你的計算包括了iPad，但沒有更大。然後您可以在此表中將您的版權信息display:none從文檔流中刪除。

剛剛看到您的編輯。您應該可以使用media屬性的height屬性來執行所需的操作。我假設您的內容將按照像素大小排列在661像素高的屏幕上，因此您只需插入更高版本屏幕的版權信息即可。較小的屏幕會自動滾動條，而661px的iPad屏幕應該恰到好處。

我不能對此進行測試了，所以如果你告訴我它是如何工作（或沒有）:)

2012-12-09 15:53:30

太好了，我會很感激的！爲了安全起見，我設置了「max-height：700px」。這使得頁腳只有全部適合纔會出現。仍然開放給不涉及媒體查詢的替代答案，但這確實非常優雅。 – Thomas

我剛剛在幾天前瞭解到這一點：D。很高興我能幫忙！ –

@Thomas：這是響應式設計的一個例子，媒體查詢是適合的解決方案。任何其他解決方案都不太優雅。 –

回答