最近做一个项目，发现了点问题，贴出来分析分析
做一个页面，页面布局需要根据屏幕大小的变化而变化。代码大致如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="expires" content="0">
<title>页面自适应</title>
<style type="text/css">
#main{min-width:940px;width:100%;height:505px;border:1px solid red;}
#left{width:200px;height:500px;border:1px solid blue;float:left;}
#right{min-width:730px;width:100%;height:500px;border:1px solid green;float:left;}
</style>
</head>
<body>
<div id="main">
<div id="left"> </div>
<div id="right"> </div>
<script type="text/javascript">
//document.getElementById("main").style.width = document.body.offsetWidth;
document.getElementById("right").style.width = document.getElementById("main").offsetWidth - 206 + "px";
</script>
</div>
</body>
</html>
设定了最小宽度，保证在窗口大小变化时页面不至于严重变形。在div中设定width的百分比，是以body为参照的。但是设定height的百分比，它就不那么听话了，解决办法是同时在css中设定html和body的height。
为了在左边div宽度固定时右边div能根据屏幕大小变化而变化，用了js来控制，如上面代码所示。
但是当浏览器窗口变小时，右边的div就跑到下面了。估计就是id为main的div宽度不够所致，在火狐下用Firebug看也没发现什么。后来在js中加上
document.getElementById("main").style.width = document.body.offsetWidth;
就一切正常了。
然后就开始想到底是怎么回事。js只会在页面刷新时运行，窗口大小变化时只有css起作用了。注掉添加的那句js，分别去掉main和right的min-width，在火狐下仍然看不出什么，在IE8下，去掉main的min-width发现main的宽度变小了，去掉right的min-width后right的宽度不发生变化。个人认为在窗口大小变化的时候，如果设定了min-width就会以变化之前的width和css中已设定min-width中较大者作为它的值。
以上纯属个人观点，不当之处还望口下留情并给予指正。
分享到：
相关推荐
当浏览器窗口大小发生变化时，jQuery会计算新的窗口宽度，并据此调整图片的宽高比，保证图片在不同分辨率下都能自适应显示。 在具体实现中，首先，我们需要在HTML结构中为每张图片定义一个容器，容器的宽高比应与...
在这个名为“CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时，背景色变成淡蓝，否则淡绿色.zip”的压缩包中，包含了一个简单的媒体查询实例。 这个实例的核心在于`@media`规则，它是CSS3...
本文将深入探讨“动态网格布局jQuery插件”这一主题，它能够实现当浏览器窗口大小发生变化时，页面布局能自动适应调整，保持良好的视觉效果。 一、jQuery简介 jQuery是由John Resig于2006年创建的一个开源项目，它...
4. 监听窗口大小变化：使用`$(window).resize()`函数监听窗口大小变化，当窗口大小改变时，重新计算并调整图片的大小和位置。 5. 动态布局：可能还会涉及到使用`float`、`display: inline-block`或者Flexbox等布局...
- **Resize事件**：通过监听`resize`事件，可以在浏览器窗口大小改变时触发函数，重新计算并设置元素的位置。例如，使用`$(window).on('resize', function() {...})`在jQuery中设置回调函数。 - **动态调整样式**...
为了使页面在窗口大小改变时动态调整CSS，我们需要监听`resize`事件： ```javascript window.addEventListener('resize', function() { // 重新执行上面的判断逻辑 }); ``` 总的来说，"JS判断浏览器分辨率自动...
这种技术允许图像和文本在用户调整浏览器窗口大小时保持视觉上的和谐与可读性，从而提供更好的用户体验。 首先，我们要理解响应式设计的基础。它是一种设计方法，旨在创建能够自适应各种设备和屏幕尺寸的网站。这...
本主题探讨的是如何利用CSS和div实现网页内容的自适应窗口宽度，确保无论用户浏览器窗口大小如何，页面都能保持良好的显示效果。 首先，我们要理解`min-width`属性。在示例代码中，`.divGlobal`, `.DivTop`, `....
JavaScript可以监听窗口的`resize`事件，每当窗口大小发生变化时，执行相应的回调函数，更新背景图像的大小或位置。 以下是一个简单的示例，展示了如何使用JavaScript实现自适应背景： ```javascript window....
例如，可以通过计算屏幕分辨率或浏览器窗口大小，动态设置控件的宽度和高度属性。但这通常不是最佳实践，因为大部分响应式工作应该在客户端完成，以减少服务器负担并提供更好的用户体验。 在压缩包内的"Example012-...
// 浏览器大小发生变化时，给id为main-container的容器设置最小高度 [removed] $(function(){ $(window).resize(function(){ $(#main-container).css(min-height, $(window).height() - 343); }).resize(); }) ...
在上面的代码中，我们将autoHeight和autoWidth函数绑定到窗口的resize事件上，以便在窗口大小变化时更新DIV层的高度和宽度。 七、总结 在本文中，我们学习了使用JS+CSS来实现DIV层自适应高度和宽度的技术。我们...
在Flex布局发生变化时，例如元素的增删、大小调整或排列顺序改变，我们可能希望添加动画效果来平滑过渡，提高用户体验。这篇博客“Flex布局变化时的动画效果解析 简单版”可能是作者对如何在Flex布局中实现动态变换...
本文将详细介绍如何使用JavaScript实现根据浏览器窗口大小实时动态改变网页文字的大小。 首先，我们需要理解的是CSS3中的`rem`单位。`rem`（root em）是相对于根元素（通常是`html`元素）字体大小的单位。通过设置`...
当用户改变浏览器窗口大小时，`onresize`事件会被触发，进而更新div元素的`height`，使其等于`clientHeight`，实现高度自适应的效果。 总的来说，实现浏览器屏幕大小高度自适应的关键在于理解并灵活运用`height`、`...
本文将详细解释如何使用JavaScript实现实时获取窗口大小变化的功能，并通过实例代码演示这一过程。 首先，要了解的是，浏览器提供的window对象具有一个resize事件，当窗口尺寸变化时，会触发这个事件。我们可以通过...
在这些库中，通常会有设置窗口大小、是否允许用户调整大小以及响应窗口大小变化事件的方法。 在Web开发中，HTML和CSS也可以实现窗口大小调整的效果。通过CSS的媒体查询（Media Queries），我们可以根据浏览器窗口的...
为了使背景图片动态响应窗口大小的变化，我们可以使用JavaScript或者CSS的媒体查询（Media Queries）。JavaScript可以通过监听窗口的`resize`事件，实时更新背景图片的大小。例如，使用jQuery库： ```javascript $...
// 监听窗口大小变化，动态调整 $(window).resize(resizeBackground); }); ``` 上述JQuery代码首先获取背景图片的实际尺寸，然后根据浏览器窗口的宽高计算合适的缩放比例。`resizeBackground`函数会在页面加载...