僅對頁面的最後部分進行溢出自動處理

我有一個由兩部分組成的頁面：第一部分可以具有各種高度，第二部分應該具有可見頁面的所有其他大小。第二部分內部所有元素的高度可以很大，只有該部分應該可以滾動。僅對頁面的最後部分進行溢出自動處理

我想出了最接近的事是this fiddle，但問題是，我使用的第二個元素的固定高度：

.images{ 
    overflow-y: auto; 
    height: 350px; 
}

再來一次：我不知道第一部分的高度，所以我不能在第一個使用height: 20%，第二個使用height: 80%。

任何想法，我該如何解決它？

來源

2014-06-26 Salvador Dali

你有沒有考慮固定在第一部分的位置？ – BuddhistBeast

@BuddhistBeast我不確定我明白你的意思。 –

正如在使用位置：固定爲您的標題，然後保持身體的內容下？ – BuddhistBeast

添加下面的jQuery代碼：

var windowHeight = $(window).height(); 
var headerHeight = $('.header').height(); 
var imagesHeight = windowHeight - headerHeight; 
$('.images').height(imagesHeight);

別忘了在您的網頁鏈接主要的jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以保留該在<head>部分。

來源

2014-06-26 04:11:17

感謝編程解決方案，但我一直在尋找純CSS的html，這就是爲什麼我沒有JS標記它。 –

-1

我被置於「overflow：hidden;」物業在身體標記

CSS：

體{

overflow-y: hidden;

}

See demo here

來源

2014-06-26 04:42:21

這沒有改變。第二部分的高度總是相同的，所以如果有人擁有巨大的顯示器，它看起來很糟糕。如果某人有小屏幕（電話） –

，如果您必須解決該屏幕問題，則爲**（。images）**類別提供**（最大寬度）**。 **例如：** .images {max-width：500px;} –

僅對頁面的最後部分進行溢出自動處理

回答

相關問題