如何不超过屏幕内容的高度？

Question

我有这个网站link。

正如你所看到的，主页是3张照片...如果您调整窗口大小，则会滚动内容并且我不希望这样...我想在那里无论屏幕高度为100％而且不会出现滚动。

主要内容的高度由jQuery代码

决定

var windowheight = $(window).outerHeight();
var meniu= $('.navbar-fixed-top').outerHeight();
$('#main-content').css('height', 100+'vh');
$('#main-content').css('height', $('#main-content').outerHeight() - 50);
$('#main-content').css('width',contentwh+20);

我尝试将高度添加到100％#content并且未成功#primary ...没有任何更改，所有内容都显示为滚动。 简单地说，我想限制内容的高度。 它可以用CSS或JS做这些事情吗？

提前致谢！

Answer 1

尝试使用overflow：hidden;

$('#main-content').css('overflow','hidden');

Answer 2

图像有自己的宽度和高度，所以当它们比容器div大时，你必须告诉css如何处理这个图像。

Overflow: hidden; 

会告诉浏览器隐藏超出容器div大小的内容。

Overflow: scroll;

将告诉浏览器添加滚动条以查看溢出的部分。

你可以做的是使用你已经拥有的脚本指定图片的大小（照顾图片比例），而不是操纵容器大小。

编辑： 让我们想象你有三张宽度为1250,250和500的图像。所以它们都需要2000px。每个图像具有相对宽度，使得1250/2000 * 100 = 62.5％等等。如果您知道可以说屏幕宽度的62.5％将是该图像的宽度。要达到它的高度，你必须检查宽度和高度之间的比例。假设例如第一图像具有937,5高度（4：3）的比率。这意味着新高度将是计算出的宽度除以4乘以3。

要设置图像宽度和高度，可以使用此jquery代码：

$(#img_id).width(1250).height(937); 

您可以通过以下方式获取窗口大小：

vpw = $(window).width();  
vph = $(window).height();

然后第一个图像宽度为：

image1w=vpw * 0,625;

如果你在window.onload和window.onresize上调用此函数，你将得到你想要的东西。你可以做一个resizeImage（）函数并像

一样调用它

window.onload = function(event) { resizeImage(); }
window.onresize = function(event) { resizeImage(); }

希望这能澄清你对这一点的怀疑