div+css页面布局,怎样设定content的高度为100%,而不是具体的像素_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:08:31
Original
1638 Leute haben es durchsucht

我搜到一些例子,但是content高度只能用具体像素,如果使用百分比,浏览器里显示的高度就是0了。

应HTML5已经不支持frame,不过csdn论坛也还在用frameset,怎样用div+css代替分帧效果呢?谢谢!

【csdn分帧源码】


    
    



【DIV+CSS源码】


  
This is the sidebar

  
2列左侧固定,右侧自适应宽度,中间无缝型??标准之路www.aa25.cn<script></script>

    

    下载此模板


回复讨论(解决方案)

js resize 调整

楼下求答案。。。

1楼正解,需要用js的resize
具体用法是:获取页面窗口的高,然后将高的值赋给content,在窗口大小改变时使用窗口函数resize,再次计算窗口的高度赋给content就可以了

1、采用JS实时判断
2、纯CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>html, body {	width:100%;	height:100%;	margin:0;	padding:0;}</style></head><body><style type="text/css">#container {margin:0 auto; width:100%;height:100%}#sidebar { float:left; width:200px; height:100%; background:#9c6;}* html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/#content { height:100%; background:#ffa;}</style><div id="container">  <div id="sidebar">This is the sidebar</div>  <div id="content">2列左侧固定,右侧自适应宽度,中间无缝型??<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><span style="display:none">    <script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script>    </span><br />    <br />    <a href="/layout/29.(l+∽).rar">下载此模板</a></div></div></body></html>
Nach dem Login kopieren

谢谢!目的是为了更符合html5,这么复杂的css各种浏览器的兼容性可能是个问题,还是用table吧,再次感谢!


1楼正解,需要用js的resize
具体用法是:获取页面窗口的高,然后将高的值赋给content,在窗口大小改变时使用窗口函数resize,再次计算窗口的高度赋给content就可以了

谢谢
js resize 调整

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage