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

  • A+
所属分类:网页设计

有网友在知道里面提问:
用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;
 }
weinxin
我的微信
帮你解决建站与SEO优化方面的疑难问题,欢迎与我交流。关注我,获得更多的学习资源!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: