在现代网页设计中，为了实现良好的用户体验和视觉效果，设计师和前端开发者常常需要解决页面元素（尤其是DIV）的高度和宽度自适应问题。本文讨论的两种主要问题是左右两侧DIV高度自适应一致，以及DIV高度如何自适应屏幕变化。
我们需要了解如何使两个或多个DIV元素的高度保持一致。在网页布局中，使用左右两侧布局（例如，侧边栏和主内容区）是常见的设计模式。为了保持视觉上的均衡，这两个区域的高度应当相等。实现这一效果的一种方法是通过CSS的float属性，浮动布局可以使元素浮动到左侧或右侧，从而允许其他内容环绕它。但是，float本身不会使元素的高度自适应。解决此问题的一种方法是利用JavaScript（特别是jQuery）来动态调整高度。
在提供的代码中，首先定义了两个DIV元素，一个为“Left”，另一个为“Right”，并分别赋予它们不同的背景色以便区分。通过JavaScript，我们首先获取这两个DIV的高度。接着，比较这两个高度值，如果左侧DIV的高度大于右侧DIV，则将右侧DIV的高度调整为与左侧一致，反之亦然。这通过jQuery提供的高度方法height()来实现。整个脚本被放在$(function() {...})中，这是在文档加载完毕后执行的简写形式。
关于DIV高度如何自适应屏幕的问题，这通常通过监听窗口大小调整事件（onresize）来实现。当窗口大小发生变化时，我们需要重新计算并更新DIV的高度，以保证它适应新的视口尺寸。在另一段提供的代码中，通过JavaScript函数auto_height()来实现这一功能。函数内部首先获取浏览器窗口的视口高度clientHeight，并减去一个固定的值（例如200像素）以考虑页面布局上的需要，然后将结果设置为DIV元素（box）的高度。通过将auto_height()函数赋给onresize事件，即可确保每当浏览器窗口大小变化时，都会重新计算DIV的高度。
在实现DIV自适应高度时，还应注意以下几点：
1. 确保在页面加载时就执行一次自适应高度的计算，以避免初始加载时布局不正确的问题。
2. 在使用float布局时，若存在多个浮动元素，应确保它们能够自适应高度，否则可能会出现布局错乱。
3. 使用JavaScript进行DOM操作时，应考虑代码的性能，避免过于复杂的操作和重复计算。
4. 在不同浏览器和设备上测试自适应效果，确保兼容性和最佳体验。
通过上述两种方法的结合使用，我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性，而且能够提升网页在不同设备和屏幕尺寸上的适应性。
