元素的自动高度答案

【问题标题】：Auto height of element元素的自动高度
【发布时间】：2015-08-31 02:12:48
【问题描述】：

我的网站上有 4 个主要部分。它们中的每一个都将宽度和高度设置为 100%，使用

    width:100%;
    height:100%;
    position:relative;

问题出在第 3 部分，其中有一个响应式表显然在改变其高度。只要它改变它的高度，一半的内容是不可见的，因为它被第四部分覆盖了。我尝试使用

overflow:auto

这没有用。有什么方法可以让内容高度 100% 之后让它自动调整高度？

我什至尝试使用

height:auto

但结果是第三部分完全消失了。

【问题讨论】：

您能否澄清“有什么方法可以使内容高度为 100%，但之后让它自动调整高度”是什么意思。目前尚不清楚您要完成什么行为...
我想要实现的内容，当内容太大时，我的 div 会自动更改其高度，但每当我将 height:auto 设置为它时，它就会完全消失。
高度 100% 应该自动缩放......你应该发布一个 jsfiddle，你看到的问题在阅读这篇文章时真的很不清楚。
jsfiddle.net/Trolstover/tfxss1sL here ，将其复制到 jsfiddle。如您所见，您看不到整张桌子。
这里有很多 css 问题；您遇到的问题是由您的相对定位引起的。通常，您想要的行为是默认浏览器行为，而您正在破坏它。查看我在这里所做的一些更改：jsfiddle.net/tfxss1sL/3

标签： html css

【解决方案1】：

你必须在至少一个像style="width: 1200px;"这样的像素高度上设置

如果您想动态调整网站的大小，请尝试使用 javascript 函数。

How to get height and width after window resize

http://www.w3schools.com/jsref/event_onresize.asp

希望这会有所帮助。

PS：我也是菜鸟。如果我错了，请纠正我。

编辑：您是否尝试过使用由 window.resizeEvent 触发的 Javascript 函数？（resizeEvent 像<body onresize="resize()"></body>一样添加到正文中

我刚刚得到了一个带有 jquery 的示例，但这看起来像：

<script>
   function resize() {
       $("#div_container_to_resize").css("height:", (window.innerHeight) + "px");
   }
</script>

纯 JavaScript 解决方案如下所示：

<script>
   window.addEventListener('resize', resize); 
   function resize() {
       document.getElementById("div_container_to_resize").setAttribute("height:", window.innerHeight + "px");
   }
</script>

有关更多信息和详细信息，请查看发布的链接。

【讨论】：

这是两个不同的链接！ stackoverflow.com/questions/12596299/…w3schools.com/cssref/pr_class_display.asp
虽然理论上可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案2】：

尝试将 div 设置为：

min-height: 100%;
min-width: 100%;

这将确保元素不会变得小于 100% 的高度和宽度，而且还允许扩展。

【讨论】：