垂直縮小div內容以適合某個高度

我無法找到實現以下內容的解決方案：假設我們有一個div（垂直邊欄），佔據視口的百分比寬度，比方說20％。在這個div裏面有一些東西，比如一個logo，一個樹形菜單e.t.c.我希望這個div具有瀏覽器視口的高度（以使其固定）。這意味着在小分辨率的情況下，div內容必須垂直縮小以適應較小的高度。我如何實現這一目標？你可以看看http://lyk-ag-stefan.att.sch.gr/。藍色邊欄對應於以上描述。垂直縮小div內容以適合某個高度

我試過一些JQuery。

$(document).ready(function() { 
    sheight = $(window).height(); 
    $('.sidebar').css("max-height", sheight); 
});

不幸的是，它沒有奏效。

謝謝

來源

2014-04-01 Unknown developer

div的需要知道父容器的高度

CSS：

html,body{ 
    height: 100%; 
} 

.sidebar{ 
    border: 1px solid silver; 
    width: 20%; 
    height: 100%; 
}

來源

2014-04-01 19:40:45 fnostro

它不工作。內容以小分辨率出現在視覺視口下（例如800x600） –

@ILIAS如果內容太大而不適合，是否要增加容器的寬度？ – Mathias

:)我告訴過你「爲什麼」......你必須解決「如何」 – fnostro

嘗試

var _tmpResize; 
jQuery(document).ready(function() { 
    jQuery(".sidebar").css({ 
     height: jQuery(window).innerHeight() 
    }); 
    jQuery(window).resize(function() { 
     clearTimeout(_tmpResize); 
     _tmpResize = setTimeout(function() { 
      $('.sidebar').css({ 
       height: jQuery(window).innerHeight() 
      }); 
     }, 200); // trigger resize event only once 
    }); 
});

見JSFIDDLE

你的側邊欄將始終具有視口的高度相同甚至resize事件

來源

2014-04-01 19:49:54 JFK

內容繼續不縮水以適應內部... –

如果你縮小內容，那麼你將它截斷。我猜你正在尋找一種「垂直響應」，在這種情況下，你必須使用@media查詢處理內容中的所有元素（字體和圖像） – JFK

像這樣使用變焦性能後：

$(window).resize(function() { 
    var sidebarHeight = $(".sidebar").outerHeight(); 
    var windowHeight = $(window).outerHeight(); 
    $(".sidebar").css("zoom", (windowHeight/sidebarHeight + 0.3)); 
});

來源

2014-04-01 20:08:51 Wilmer

垂直縮小div內容以適合某個高度

回答

相關問題