logo标签列表

动态设置 DIV 的高度

javascripthtmlcss
33
在一个Web应用程序中，我有一个包含DIV的页面，该DIV的自动宽度取决于浏览器窗口的宽度。
我需要对象的自动高度。DIV距屏幕顶部约300像素，其高度应使其延伸到浏览器屏幕底部。我有一个容器DIV的最大高度，因此必须有最小高度限制。我相信我可以在CSS中限制它，并使用JavaScript来处理DIV的调整大小。
我的JavaScript并不像应该的那样好。是否有一个简单的脚本可以帮助我完成这个功能？
编辑：DIV包含一个控件，该控件实现了自己的溢出处理（实现了自己的滚动条）。
8个回答
40

试试这个简单明了的函数：

function resizeElementHeight(element) {
  var height = 0;
  var body = window.document.body;
  if (window.innerHeight) {
      height = window.innerHeight;
  } else if (body.parentElement.clientHeight) {
      height = body.parentElement.clientHeight;
  } else if (body && body.clientHeight) {
      height = body.clientHeight;
  }
  element.style.height = ((height - element.offsetTop) + "px");
}

无论您的300px更改，它都不依赖于当前指定的body顶部距离。

编辑：顺便说一句，每次用户更改浏览器大小时，您都需要在该div上调用此函数，因此您当然需要为此连接事件处理程序。

10

document.getElementById('myDiv').style.height = "500px";

如果您的高度是动态的，您可以使用height + 'px'

这是调整对象高度的基本JS代码。我刚刚在一个自动高度属性的情况下使用了这个代码，但是当我通过XMLHttpRequest添加一些内容时，我需要调整父级div的大小，而这个offsetheight属性在IE6/7和FF3中起到了关键作用。

@AlexanderElgin 我非常喜欢这个答案，但不幸的是它对我没有用。 :( ...我已经有了我想要的大小(int类型)，但当我尝试这样做时，它就被忽略了！我的代码是target.style.height = height; ...不确定我哪里出错了！ - Richard T
1
请注意，如果您使用此方法，您需要在结尾添加“px”或其他单位。例如，在上面的例子中，它将是document.getElementById（'myDiv'）.style.height ='500px';。如果您具有动态高度，则可以使用 height + 'px'。 - Robert Corponoi
10

在溢出的情况下应该发生什么？ 如果您希望它只是到达窗口底部，请使用绝对定位：

div {
  position: absolute;
  top: 300px;
  bottom: 0px;
  left: 30px;
  right: 30px;
}

这将使 DIV 从每个侧面向内缩进 30 像素，距离屏幕顶部 300 像素，并与底部齐平。添加 overflow:auto; 来处理内容大于 div 的情况。

编辑：@Whoever 标记了这个回答，一个解释会很好... 回答有什么问题吗？

1

这是我能想到的最简单的...

function resizeResizeableHeight() {
    $('.resizableHeight').each( function() {
        $(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
    });
}

现在你所要做的就是将resizableHeight类添加到你想要自动调整大小（相对于其父元素）的所有元素中。
0

进行轻微更正：

function rearrange()
{
var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined'
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop  - 6)+ "px";
}
0
如果我理解你的问题，这个应该可以解决：
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight

var windowHeight;

if (typeof window.innerWidth != 'undefined')
{
    windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document)
else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth != 'undefined' 
        && document.documentElement.clientWidth != 0)
{
    windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
    windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}

document.getElementById("yourDiv").height = windowHeight - 300 + "px";
0

受@jason-bunting启发，无论是高度还是宽度都是同样的事情：

function resizeElementDimension(element, doHeight) {
  dim = (doHeight ? 'Height' : 'Width')
  ref = (doHeight ? 'Top' : 'Left')

  var x = 0;
  var body = window.document.body;
  if(window['inner' + dim])
    x = window['inner' + dim]
  else if (body.parentElement['client' + dim])
    x = body.parentElement['client' + dim]
  else if (body && body['client' + dim])
    x = body['client' + dim]

  element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}
0
你可以利用视口高度，这样可以使其更具响应性。 

function changeBoxHeight(element) {
  element.classList.add('myBox2');
  // or toggle with element.classList.add('myBox2');
}
.myBox1 {
  height: 300px;
  
  /* for extra styling, not required */ 
  width: 100%;
  background: teal;
  transition: 0.1s; /* remove this line to remove the animation */
}

.myBox2 {
  height: 100vh; /* can also use calc(100vh - 300px) for example to do [entire height] - 300 pixels*/
}

/* for extra styling, not required */ 

body {
  margin: 0;
  padding: 0;
}

.btn {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 3px;
  background: #ffc2e2;
  border: none;
  transition: 0.3s;
  cursor: pointer;
  position: fixed;
  bottom: 5px;
  right: 5px;
  opacity: 0.75;
}

.btn:hover {
  background: #ff9cd0;
  opacity: 1.0;
}
<div id="myBox1" class="myBox1">
</div>

<button onclick="changeBoxHeight(document.getElementById('myBox1'));" class="btn">Change height</button>

这段代码将在点击“更改高度”时向盒子添加一个额外的类，该类将改变尺寸。
如果您使用classList.toggle()，它将切换具有样式的类。
100vh等于屏幕的尺寸，而10vh等于屏幕高度的1/10。此功能还将消除需要监听窗口大小变化的事件侦听器的需求。由于使用了视口，您可能需要将其添加到您网站的中。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接