垂直缩小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内容以适合某个高度

回答

相关问题