滾動div上的部分隱藏內容

我一直在尋找類似的問題，但我找不到，所以我暴露了我的問題，希望你能告訴我我做錯了什麼以及如何糾正它。我正在嘗試完成以下情形：兩個div並排使用100％的高度和寬度，其中左邊的可以滾動。正確的一個有幾個div，而最後一個應該有它的內容可滾動。圖片可以更好地描述的情景：滾動div上的部分隱藏內容

OP's Layout

藍色的div是那些可滾動的，但紅色的高度是未知的。我能夠部分完成這一點，但問題是，最後一個div的內容從視圖中拉下來的比例與紅色div的高度總和相同，因此當用戶滾動該藍色div時，能夠查看它的全部內容。我能做些什麼來解決這個問題？我也有一個小提琴，這種行爲可以複製：http://jsfiddle.net/d3dNG/3/ 感謝您對此的任何反饋。

HTML：

<div class="container"> 
    <div id="left"> 
     Left (first)<br /> 
     [...]Left<br /> 
     Left (last)<br /> 
</div> 
<div id="right"> 
    <div id="header1">Header 1</div> 
    <div id="header1">Header 2</div> 
    <div id="header1">Header 3</div> 
    <div id="rightContent"> 
     Right (first)<br /> 
     Right<br /> 
     [...] 
     Right (last)<br /> 
    </div> 
</div> 
</div>

CSS：

html, body { 
margin: 0; 
padding: 0; 
height: 100%; 
width: 100%; 
overflow: hidden; 
} 

.container { 
height: 100%; 
width: 100%; 
background: pink; 
} 

#left { 
float: left; 
width: 100px; 
height: 100%; 
overflow-y: auto; 
background: gold; 
} 

#right { 
height: 100%; 
width: 100%; 
} 

#rightContent { 
height: 100%; 
overflow-y: auto; 
background: lime; 
}

來源

2014-01-21 NunoM

你打開jQuery解決方案嗎？ –

我希望只有一個CSS解決方案，但很顯然，我對任何解決這個問題的方法都是開放的。謝謝（還有編輯） – NunoM

如果你不知道你的標題部分的高度，那麼你不得不求助於腳本解決方案。 –

因爲你不知道什麼#header1的大小可以通過使用JavaScript或jQuery的去了解這一點。

（確保只在網頁上使用ids一旦因爲它們獨特，#header1使用3次）

我改變了HTML：

<div class="headParent"> 
    <div class="header1">Header 1</div> 
    <div class="header1">Header 2</div> 
    <div class="header1">Header 3</div> 
</div>

小的jQuery我寫的：

function rightSize() { 
    var hH = $('.headParent').height(), // grabs the `#header1`'s parents height 
     mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent` 

    $('#rightContent').css({height: mH}); 
} 

rightSize();

最後，小提琴：Demo

Even once there is more.header1#rightContent仍將正確適應內容。

來源

2014-01-21 14:41:28

謝謝。＃header1是一個拼寫錯誤，它應該是header1，header2 ...，表示div和div之間的內容類型不同。由於需要重新計算#rightContent的高度，因此缺少的唯一一件事就是'調整大小'事件。我嘗試了$（window）.resize（）事件，但它沒有產生任何結果，可能是我的錯誤。 – NunoM

啊，我很高興這是一個錯字，哈哈。給我一下，我會告訴你如何做調整。 –

@NunoM'.on（'resize'）'比我期待的要複雜得多。這是一個，http://jsfiddle.net/Josh_JM/d3dNG/17/，小提琴開始你。目前的問題，不適用於上載和調整大小非常奇怪。 –

試試這個：

HTML

<div class="container"> 
    <div id="left"> 
     Left (first)<br /> 
     [...]Left<br /> 
     Left (last)<br /> 
</div> 
<div id="rightOne"> 
    <div id="header1">Header 1</div> 
    <div id="header1">Header 2</div> 
    <div id="header1">Header 3</div> 
</div> 
<div id="rightTwo"> 
    <div id="rightContent"> 
     Right (first)<br /> 
     Right<br /> 
     [...] 
     Right (last)<br /> 
    </div> 
</div> 
</div>

CSS

#rightOne { 
    height: 16%; 
    width: 100%; 
} 

#rightTwo { 
    height: 84%; 
    width: 100%; 
}

我已經更新了你的提琴：http://jsfiddle.net/d3dNG/4/

來源

2014-01-21 14:33:31 taxicala

紅色divs的高度需要是未知的，它不是基於百分比，而是基於其內容。 – NunoM

然後，沒有「僅限CSS」的解決方案，請檢查@Josh Powell的答案，這應該可行。 – taxicala

滾動div上的部分隱藏內容

回答

相關問題