jQuery可變寬度與自定義滾動條的高度調整

我讀過幾篇關於使用jQuery來改變基於瀏覽器窗口的大小改變高度的瀏覽器窗口，它涉及到觀看窗口大小，然後更新'內聯'風格到一個新的高度從寬度尺寸制定。然而，所有發現的解決方案都不起作用，因爲我需要類似但不一樣的東西，基本上我想要一個調整大小的內部元素，可悲的是內容不是圖像，因爲這樣會更容易，並節省了我寫這篇文章。jQuery可變寬度與自定義滾動條的高度調整

所以HTML代碼，你會希望看到看起來是這樣的：

<header> </header> 
<div class="mainbox"> 
    <div class="custombar"> </div> 
    <div class="contentContainer"> 
     <div class="contentOne"> </div> 
     <div class="contentTwo"> </div> 
     <div class="ContentThree"> </div> 
    </div> 
    <div class="contentFooter"> 
     <ul> 
      <li><a href="#">Nav 1</a></li> 
      <li><a href="#">Nav 2</a></li> 
      <li><a href="#">Nav 3</a></li> 
     </ul> 
    </div> 
</div> 
<footer> </footer>

CSS看起來像：

.header{height:135px;width:100%;background:#000;} 
.mainbox{width:100%;height:500px;background:#ccc;} 
.footer{height:135px;width:100%;background:#000;}

現在我瞭解固定標題的解決方案，固定底部而不使用固定的位置，但在此之前ne跳槍我正在尋找一個擴展版本，將支持一點點，我會在稍後解釋一下。

這是它變得複雜或至少對我

Basiclly我想一個jQuery腳本，將更新基於瀏覽器窗口的大小，高度，只有一個內容DIV是有史以來可見所以認爲3種顏色，當你向下滾動時，你會得到另一個，但我希望它以某種方式，所以只有1是可見的，這可以通過抵消和使用我知道這麼多的名稱來完成，但這不會調整窗口的大小，以至於只有一個元素是可見的。

我希望整理了一些圖片，這可能解釋了什麼我以後多一點...

Slide Example 1

考慮到從上面的圖像和文字的形式

以下

頭始終可見
內的內容將與瀏覽器調整
導航鏈接將始終是v滾動
頁腳總是可見

另一個幻燈片的例子，當isible甚至

Slide Example 2

你可以從上圖中看到的內容將下滑，但最重要的調整，只有一個曾經幻燈片將出現使用去和100％的高度。

寬度和高度變化

這是很容易的，如果你願意讓用戶滾動和有內容裁剪拋出一個解決方案，但內容很輕，並且將只用1張纔可見很好地工作。

瞭解

我知道在一些點在中間的內容會變得如此之小，它不能正確渲染，這是沒有問題的，當它得到我會打開該功能的到X寬度使用媒體查詢，我感謝每個人都有助於幫助任何形式的形式和抱歉，如果它在jQuery前面的一個小板，它不是我的強項，我希望有人可以一起打jFiddle或類似或者將我指向已經完成的事情的方向。

對於像使用min-height這樣的問題，可能有更簡單的方法，任何工作方法的讚賞。 PS所有職位的猛獁象，那不是我的意圖;）

來源

2013-11-04 Simon Hayter

如果某個幻燈片中的內容最終佔用的空間超過可用空間（例如，用戶只有很多文字縮放）？幻燈片高度設置爲2個滾動條，還是隱藏內容？我只需要放置一個通用滑塊（沒有主滾動條可以在這種情況下在幻燈片中滾動） – mikakun

我想你想是這樣的

只有內容應滾動

JS Fiddle

你可以給MIN- div的高度調整大小

$('.container').css("min-height", '250px');

來源

2014-09-23 06:47:40

jQuery可變寬度與自定義滾動條的高度調整

回答

相關問題