Jquery 将“高度”设置为以数字分隔的视口宽度_Jquery_Html_Css

Jquery 将“高度”设置为以数字分隔的视口宽度

jquery html css

Jquery 将“高度”设置为以数字分隔的视口宽度,jquery,html,css,Jquery,Html,Css,我有一个DIV，我试图根据视口宽度除以一个数字来设置它的高度。这里有一个小问题…但是如果HTML/body设置为overflow-y:hidden，DIV会导致其个人滚动区域离开屏幕，导致内容的最后几行无法查看当HTML/Body设置为overflow-y:hidden并且我在DIV中滚动时，如何才能查看#container中的最后一行内容 <html> <head> <script src="//code.jquery.com/jquery-1.10.2.

我有一个DIV，我试图根据视口宽度除以一个数字来设置它的高度。这里有一个小问题…但是如果HTML/body设置为overflow-y:hidden，DIV会导致其个人滚动区域离开屏幕，导致内容的最后几行无法查看

当HTML/Body设置为overflow-y:hidden并且我在DIV中滚动时，如何才能查看#container中的最后一行内容

<html>

<head>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <style>
    #container { border: solid 1px red; padding: 5px; overflow-y: scroll; max-width: 45%; }
            #main { border: solid 1px blue; background-color: blue; padding: 5px; }
            #text { border: solid 1px green; padding: 5px; }
            body, html { 
            overflow-y: hidden;
            overflow-x: hidden;
            }
  </style>
</head>

<body>
  <script>
    $(function() {

      var viewportWidth = $(window).width();
      var viewportHeight = $(window).height();

      $("#container").height(viewportWidth / 1.1);
      $("#text").text("The width for the viewport is " + viewportWidth + "px. And the height is " + viewportHeight + ". And the width of the DIV is " + $("#container").width() + ". And the height of the DIV is " + $("#container").height());
    });
  </script>

  <div id="container">
    <div id="text"></div>
    Add more content here to get it to scroll. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum. END LINE@@@@@@@@@@@
    <div id="main">
      <!-- Leave this blank -->
    </div>
  </div>
</body>

</html>


#容器{边框：实心1px红色；填充：5px；溢出-y:滚动；最大宽度：45%；}
#主{边框：纯色1px蓝色；背景色：蓝色；填充：5px；}
#文本{边框：实心1px绿色；填充：5px；}
正文，html{
溢出y：隐藏；
溢出x：隐藏；
}
$（函数（）{
var viewportWidth=$（窗口）.width（）；
var viewportHeight=$（窗口）.height（）；
$（“#容器”）。高度（视口宽度/1.1）；
$（“#text”）.text（“视口的宽度为“+viewportWidth+”px。高度为“+viewportHeight+”。DIV的宽度为“+$（“#容器”）.width（）+”。DIV的高度为“+$（“#容器”）.height（））；
});
在此处添加更多内容以使其滚动。学识益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智益智。终点线@@@@@@@@@@@

您可以获得视口高度或计算大小的最小值：

这样它就永远不会消失。请注意，我在

body

一个简单的CSS属性上重置了边距。设置集装箱的最大高度：100vh

请参阅下面的示例或代码片段

看

$（函数（）{
var viewportWidth=$（窗口）.width（）；
var viewportHeight=$（窗口）.height（）；
$（“#容器”）。高度（视口宽度/1.1）；
$（“#text”）.text（“视口的宽度为“+viewportWidth+”px。高度为“+viewportHeight+”。DIV的宽度为“+$（“#容器”）.width（）+”。DIV的高度为“+$（“#容器”）.height（））；
});
#容器{
边框：实心1px红色；
填充物：5px；
溢出y：滚动；
最大宽度：45%；
最大高度：100vh；
}
#主要{
边框：纯色1px蓝色；
背景颜色：蓝色；
填充物：5px；
}
#正文{
边框：实心1px绿色；
填充物：5px；
}
身体，
html{
溢出y：隐藏；
溢出x：隐藏；
}

同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学同学
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识益普生学识
益普生知识益普生知识益普生知识益普生知识益普生知识益普生知识益普生知识益普生知识益普生知识
$(function() {

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var containersize = Math.min(viewportHeight, viewportWidth/1.1)

$("#container").outerHeight(containersize);

$("#text").text("The width for the viewport is " + viewportWidth + "px. And the height is " + viewportHeight + ". And the width of the DIV is " + $("#container").width() + ". And the height of the DIV is " + $("#container").height());
});