在固定高度的 y 軸上溢出滾動

Question

我有一個顯然很簡單的問題是：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>​

我在一個容器內有 3 個 div：A 和 B 具有固定的高度。 C 必須有一個可擴展的高度，它隨着容器的高度而擴展。 如果 C 中的內容太大，我希望 C 滾動但將 A 和 B 保持在同一個位置。

代碼在： http://jsfiddle.net/V2c9G/

我做不到。

我試過：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="xxx" style="overflow-y:scroll">
       <div class="c"></div>
    </div>
</div>​

沒有成功。 容器 div 應該隨瀏覽器調整大小。

一個復雜的例子是http://www.sencha.com/examples/#overview （我說的是布局，讓瀏覽器變小，你會看到滾動出現，標題保持固定）但這不是解決方案，因為它使用 JS 重新計算高度。

任何的想法？

Answer 1

我認為您可能正在搜索這樣的內容： http://jsfiddle.net/QsLFt/ 。 但是，我不確定如何擺脫隱藏滾動條的 div，最簡單的解決方案可能是將其設置為固定寬度？

Answer 2

編輯 3：

這是我推薦的解決方案，它使用下面編輯 2 中的 CSS 作為后備，但使用 JavaScript 適當地調整您的 div 大小，並在您的 window 大小更改時使用。 如果客戶端禁用了 JavaScript，則 CSS 解決方案提供了一個不錯的起點，而 JavaScript 確實不應該影響頁面的性能，因此我認為沒有理由不使用 JavaScript 來完善您想要看到的內容。 可以在此處看到工作中的小提琴。 此外，這是相應的 JavaScript 代碼：

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }

    return 740;//provide a default height as a fallback
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);

---

我認為你需要調整你的第三個div的絕對高度來占用空間的rest（絕對或百分比），在父div上設置溢出為隱藏，讓第三個內部div中的內容決定是否是否顯示滾動條。 這是使用絕對高度方法的更新小提琴。

編輯：

從你的“想象容器是瀏覽器”評論（對我來說意味着滾動條應該在容器上），你真正需要做的就是將第三個 div 中的溢出設置為“滾動”並將高度設置為“自動” '. 這是一個更新的小提琴。

編輯#2：

根據您對這個問題的評論，聽起來您需要使用百分比法 go 。 最直接的方法是將a、b 和 c 的高度設為一個百分比（我必須調整邊距以使其適合所有縮放）。 不幸的是，使用這種方法，頂部組件將無法修復，聽起來您可能會在那里顯示 static 內容，這看起來很時髦。 因此，另一種選擇是選擇瀏覽器支持的最小尺寸 window 並調整第三個元素的百分比，使其恰好適合。 這是一個小提琴。 然而，缺點是 window 的高度越大，頁面底部的空白空間就越多，並且在一定高度以下會有 2 個滾動條。 要在頂部使用固定大小的 div 正確執行此操作，您需要向 window.resize 方法添加一個事件偵聽器，並在發生這種情況時根據 window 的新大小適當調整第三個 div 的大小。

注意：在這種情況下，我希望 W3C 批准百分比加像素的高度、寬度和其他尺寸屬性！

Answer 3

您需要在.container中應用overflow-y:scroll

看到這個，

http://jsfiddle.net/v4ZtN/

編輯（評論后）：

Css：

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto; 
    height:220px;
}

.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
}

.b{
   background-color: blue;
   height: 30px;
   margin: 2px;    
}

.c{
   background-color: green;
   overflow-y: scroll;    
   height:inherit;
}

Html：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"><img src="http://www.boingboing.net/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>

編輯：2（評論后）

用這個改變.c風格。

.c{
       background-color: green;
       overflow-y: scroll;    
       height:100%;
    }

檢查這個小提琴： http://jsfiddle.net/XM4gH/6/

Answer 4

div 僅在您將一些數據放入其中時才顯示滾動，這是結果； 小提琴

Answer 5

根據您的 jsFiddle 目前的情況，我認為您可以簡單地將其添加到您的 .container class 的樣式聲明中：

    overflow:hidden;

但是，您必須實際向 .c div 添加內容才能看到任何滾動。

Answer 6

這個anser是否符合您的要求？ 在此處輸入鏈接描述

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto;

    height: 315px;
}
.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
width: 90%;
}


.b{
   background-color: blue;
   height: 30px; 
   margin: 2px;    
width: 90%;
}

.c{
   background-color: green;
   height: 250px; 
   margin: 2px; 
width: 90%;    
   overflow-y: scroll;    
}
​

Answer 7

很難根據問題准確判斷您要做什么，但如果這是期望的結果，那么這些是我在您的代碼中發現的問題：

1. 您需要隱藏紅色框上的溢出，因此綠色框不會超出容器
2. 在綠色框中，如果有足夠的數據可以擴展，則需要滾動條。 這是可行的，但是您專門設置的高度 (250px) 足以延伸出容器。 你想要一個特定的高度，這個數字是容器中剩余的任何東西。 我有 132px。 然后應用溢出滾動，任何超出此高度的內容都將是可滾動的。

Answer 8

高度布局的替代解決方案可以在以下文章中找到：

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/