最新消息:承接网站建设、网站优化、SEO项目,商家、企业个人均可,提供参考案例或自己的项目说明即可,非诚勿扰!

用DIV+CSS布局实现自适应浏览器大小疑问解答

网页设计 admin 1078浏览 0评论

有网友在知道里面提问:
用css+div如何实现?高手吗求赐教,不用js如何实现?
参考百度网盘网页布局、金山网盘的网页版的布局,想实现这种布局。

自适应布局如何实现

 function resize_window(){
 $("#left").height($(window).height()-100);
 $("#right").height($(window).height()-100).width($(window).width()-201);
 }
 $(function () {
 resize_window();
 $(window).resize(function(){
 resize_window();
 });
 });

这个是top的div是100px,width100%;left的height为window的高减去topdiv的高,右边C的高和左边一样,宽的窗口的宽减去B的宽度。

只能自适应宽:

让B区float:left;
让c屈不float
然后设置左边距margin-left:100px;width:auto;
以上只能自适应宽度, 一般是不能自适应高度的。
自适应高必须用JS才能实现。用DIV+CSS布局实现自适应浏览器大小疑问解答。

网站自适应布局

在html中加入div,然后用CSS定义div的高和宽,不要把数值定了,有弹性的定数值,用百分比的单位设置,就可以做到高度或宽度自适应,比较推荐火狐浏览器。

.layoutaside {
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 188px;
 background: #f2f2f2;
 }

转载请注明:网站SEO优化 » 用DIV+CSS布局实现自适应浏览器大小疑问解答

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址