<
DIV
class
=
cnblogs_code
onclick
=
"cnblogs_code_show('d604edb5-b6c0-422e-ae1e-fdb13734bf43')"
><
IMG
id
=
code_img_closed_d604edb5
-b6c0-422e-ae1e-fdb13734bf43
class
=
code_img_closed
alt
=
""
src
=
"http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"
><
IMG
style
=
"DISPLAY: none"
id
=
code_img_opened_d604edb5
-b6c0-422e-ae1e-fdb13734bf43
class
=
code_img_opened
onclick
=
"cnblogs_code_hide('d604edb5-b6c0-422e-ae1e-fdb13734bf43',event)"
src
=
"http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif"
><
SPAN
class
=
cnblogs_code_collapse
>View Code </
SPAN
><
DIV
id
=
cnblogs_code_open_d604edb5
-b6c0-422e-ae1e-fdb13734bf43
class
=
cnblogs_code_hide
>
<
DIV
><
style
type=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>text/css</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
body {<
BR
>
margin:<
SPAN
style
=
"COLOR: #800080"
>0</
SPAN
>;<
BR
>
padding: <
SPAN
style
=
"COLOR: #800080"
>0</
SPAN
>;<
BR
>
}<
BR
>
#container {<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>/*</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> IE6 不支持min-width属性,但是IE7+和W3C支持 </
SPAN
><
SPAN
style
=
"COLOR: #008000"
>*/</
SPAN
><
BR
>
min-width:1000px;<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>/*</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> 用CSS表达式让IE6也支持最小宽度 </
SPAN
><
SPAN
style
=
"COLOR: #008000"
>*/</
SPAN
><
BR
>
_width:expression((document.documentelement.clientwidth||document.body.clientwidth)<<
SPAN
style
=
"COLOR: #800080"
>1000</
SPAN
>?<
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>1000px</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>:<
SPAN
style
=
"COLOR: #800000"
>""</
SPAN
>);<
BR
>
margin: <
SPAN
style
=
"COLOR: #800080"
>0</
SPAN
> auto;<
BR
>
}<
BR
>
#header {<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>/*</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> IE6 不支持min-width属性,但是IE7+和W3C支持 </
SPAN
><
SPAN
style
=
"COLOR: #008000"
>*/</
SPAN
><
BR
>
min-width:940px;<
BR
>
height: 70px;<
BR
>
padding-left: 30px;<
BR
>
padding-right: 30px;<
BR
>
}<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>/*</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> Header Content的实际宽度已经为1002px了 </
SPAN
><
SPAN
style
=
"COLOR: #008000"
>*/</
SPAN
><
BR
>
#header_content {<
BR
>
width: <
SPAN
style
=
"COLOR: #800080"
>100</
SPAN
>%;<
BR
>
border: 1px solid #ccc;<
BR
>
height: <
SPAN
style
=
"COLOR: #800080"
>100</
SPAN
>%;<
BR
>
}<
BR
>
#main {<
BR
>
padding-left:30px;<
BR
>
padding-right: 30px;<
BR
>
margin-top: 10px;<
BR
>
}<
BR
>
#main_content {<
BR
>
width: <
SPAN
style
=
"COLOR: #800080"
>100</
SPAN
>%;<
BR
>
}<
BR
>
#left {<
BR
>
border: 1px solid #ccc;<
BR
>
width: 200px;<
BR
>
<
SPAN
style
=
"COLOR: #0000ff"
>float</
SPAN
>: left;<
BR
>
}<
BR
>
#right {<
BR
>
border: 1px solid #ccc;<
BR
>
<
SPAN
style
=
"COLOR: #0000ff"
>float</
SPAN
>: right;<
BR
>
min-width:700px;<
BR
>
}<
BR
>
</
style
><
BR
>
<
script
type=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>text/javascript</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
> src=<
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>></
script
><
BR
>
<
script
type=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>text/javascript</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
$(document).ready(function(){<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>//</
SPAN
><
SPAN
style
=
"COLOR: #008000"
>调用函数</
SPAN
><
SPAN
style
=
"COLOR: #008000"
><
BR
>
</
SPAN
> <
SPAN
style
=
"COLOR: #0000ff"
>var</
SPAN
> pagestyle = function() {<
BR
>
<
SPAN
style
=
"COLOR: #0000ff"
>var</
SPAN
> right = $(<
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>#right</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>);<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>//</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> 请注意这个3减去300的实际算法</
SPAN
><
SPAN
style
=
"COLOR: #008000"
><
BR
>
</
SPAN
> <
SPAN
style
=
"COLOR: #0000ff"
>var</
SPAN
> w = $(window).width() - <
SPAN
style
=
"COLOR: #800080"
>300</
SPAN
>;<
BR
>
<
SPAN
style
=
"COLOR: #0000ff"
>if</
SPAN
>(w < <
SPAN
style
=
"COLOR: #800080"
>700</
SPAN
>){<
BR
>
w = <
SPAN
style
=
"COLOR: #800080"
>700</
SPAN
>;<
BR
>
}<
BR
>
right.width(w);<
BR
>
}<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>//</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> 窗体加载时自适应宽度</
SPAN
><
SPAN
style
=
"COLOR: #008000"
><
BR
>
</
SPAN
> pagestyle();<
BR
>
<
SPAN
style
=
"COLOR: #008000"
>//</
SPAN
><
SPAN
style
=
"COLOR: #008000"
> 注册窗体改变大小事件 </
SPAN
><
SPAN
style
=
"COLOR: #008000"
><
BR
>
</
SPAN
> $(window).resize(pagestyle);<
BR
>
});<
BR
>
<
BR
>
</
script
><
BR
>
<
div
id=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>container</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
<
div
id=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>header</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
<
div
id=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>header_content</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>> <
img
src=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>http://images.cnblogs.com/logo_small.gif</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
> alt=<
SPAN
style
=
"COLOR: #800000"
>""</
SPAN
>> </
div
><
BR
>
</
div
><
BR
>
<
div
id=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>main</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
<
div
id=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>left</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
<
h2
>Left</
h2
><
BR
>
</
div
><
BR
>
<
div
style=<SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>width: 1049px; </
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
> id=<
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>right</
SPAN
><
SPAN
style
=
"COLOR: #800000"
>"</
SPAN
>><
BR
>
<
h2
>Right</
h2
><
BR
>
</
div
><
BR
>
</
div
></
DIV
>
</
DIV
></
DIV
>
代码中有几处要注意的地方,我在下图中有标注出来,要查看运行结果,请复制上面的代码保存为html,所有url都是外部链接。
相关推荐
2列左窄右宽高度自适应且未知高度底部平齐、型+头部+导航+尾部 CSS模板
其值越小,则对应的layout_width或layout_height的优先级就越高,一般横向布局中,决定的是layout_width的优先级;纵向布局中,决定的是layout_height的优先级。 传统的layout_weight使用方法是将当前控件的layout_...
宽高自适应,支持PC/移动端,提供滚动加载; 自定义程度高,布局未采用绝对定位
提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件(窗口大小调整,CSS动画和过渡,改变方向和鼠标事件)。 简化通讯和主机...
根据Masonry自动布局Cell自适应高度
C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题C# .net Web 页面 嵌套 自适应 高度 问题
UITableviewCell高度自适应
一行代码搞定自动布局!支持Cell和Tableview高度自适应,Label和ScrollView内容自适应,致力于做最简单易用的AutoLayout库。 (此图示例详见demo7) 只需要3部设置就可以实现多cell的tableview高度自适应。 ...
TableVIew使用MMVC布局 ,cell点击展开高度自适应
典型的三行两列居中高度自适应布局 如何使整个页面内容居中,如何使高度自适应内容自动伸缩,这是学习CSS布局最常见的问题。 下面给出一个实际的列子,附详细说明。 首先可以将下列代码复制到html文件中运行一下,...
html高度自适应三种经典布局
这是web开发中必不可少的门户窗口高度自适应插件,对于web开发利用很好
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
介绍流体布局的实现原理和方法 自适应css布局
div+css高度自适应div+css高度自适应div+css高度自适应div+css高度自适应
css
主要介绍了微信小程序 图片宽高自适应的相关资料,需要的朋友可以参考下
WordPress自适应白天暗夜 高颜值无刷新加载 首页支持三种布局 v2.4 请勿商业运营,违法使用和传播!仅供研究学习使用!
jquery----TextArea高度自适应
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight