HTML页面大小显示问题，超出自动隐藏

Posted 2023-03-15

我知道当内容大于显示区域时怎么自动隐藏，
但是现在我遇到了一个问题是刚刚相反的，
就是内容小于显示区域的时候怎么把多余的显示区域隐藏？

假设：
有一个div，width：1024px；height：600px；
但是我的内容只有300px；
怎么将多余的300px高度自动隐藏？

别跟我说直接把height设为300px；
因为这是一个Tab多页签

这个区域内容可能只有300px；
但是下个区域可能就是600px；刚刚好的！
目前我给显示区域的div设置了一下的值：

.content
background: #fff;
position: relative;
width: 100%;
height: 2600px;
z-index: 5;
overflow: hidden;
border-radius: 0 3px 3px 3px;

你可以给div设置一个最小高度值，min-height：300px；这样的话，你的div最小就是300px，当内容超过300的时候，div也会自动伸缩。另外max-height是最大高度。望采纳！！谢谢，不会了可以再追问我追问

刚刚试了一下，

模块一内容高度占300px
模块二内容高度占600px；

设置
min-height：300px；
max-hieght：1000px；

所有模块都只显示300px的高度；

追答

应该不会的，你看看是不是你的div名称写错了，或者你给我截个图

追问

没有写错看过了，

追答

你的div布局对吗。你的模块一和模块二是子类，而设置最小高度的是需要设置它们两个的父级div。列入如下：
//这是它们的父级div，这个div的高是随它的两个子级div的高自动伸缩
//这是子级div

//这是子级div

注意（它们的父级div不要设置死高，一定要只设置最小和最大高度就可以了）

参考技术A 为什么不能不设置高度，让内容直接撑大div追问

结构大概是这个样子：

模块一

模块二

如果content不设置高度的话，
那么content-1、content-2里面的东西就显示不出来，
是空白的。

追答

你的布局和样式可能不合理，正常情况下是可以直接撑大并显示的，如果不能改样式，也可以用js直接获取高度赋值，不要在css样式里写死

追问

通常是可以，但是有些时候你为了布局不得不给div加上position，float，只要有这些属性就不会撑大了。

追答

你这里父级和子级用的是定位，改样式可以考虑子级用float浮动，父级清除浮动，这样父级可以不用写高度。一定要懂定位的话可以考虑用$('.content div').height()给父级赋值