网页分成上下两部分

highscore2 2010-07-16 02:36:12

网页分成上下两部分, 上面部分高度自动根据屏幕变化，下面部分固定高度为200(下面部分类似窗口的状态栏,固定不动) 请问如何做?

...全文

1029 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

highscore2 2010-08-09

打赏
举报

9楼的，当main的div的内容很多时，超出div的垂直显示范围的时候就不行了.

10楼的, 也不行，页面内容多的时候，整个页面右面多了流动条，最底层的div必须滚动才能看到.

看来只有写js来调整高度.

碧海情天-赵亮 2010-07-22

打赏
举报

<style>

body {margin:0;padding:0}

#main {background:yellow;height:100%;width:100%}

#bt {background:red;height:200px;position:absolute;bottom:0px;left:0px;width:100%;}

</style>

<div id="main">top</div>

<div id="bt">foot</div>

highscore2 2010-07-22

打赏
举报

楼上一些朋友用了js来实现，请问能否直接用css就能实现?

ghost9928 2010-07-22

打赏
举报

用JS能够自动获取该屏幕高度，如果不用JS。可在DIV中填充内容...

<style>

body { margin:0;}

#div1 { width:100%; height:100%; background:#CCC; overflow:hidden;}

#div2 { width:100%; height:50px; background:#666; position:fixed; bottom:0;}

</style>

<body>

<div id="div1"><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>

<div id="div2">bottom</div>

</body>

WebAdvocate 2010-07-19

打赏
举报

既然，下面部分类似状态栏，那么就应该让它脱离常规流，直接使用position:fixed，而上面的部分直接高度100%就可以了
一般状态栏不会太高吧 200px有点夸张

cheng20100915 2010-07-19

打赏
举报

.........

hibin101 2010-07-17

打赏
举报

用JS 设置上面的DIV的高度为documentElement.clientHeight

Wings_JK 2010-07-16

打赏
举报

<body>

    <form id="form1" runat="server">

    <div id="div-up" class="up">

    </div>

    <div class="down">

    </div>

    </form>

</body>



<script type="text/javascript">

    function changeHeight() {

        document.getElementById("div-up").style.height = document.documentElement.clientHeight - 210 + "px";

    }

    window.onresize = function() {

        changeHeight();

    };

</script>

.up{width:900px;background-color: Blue;   }

.down{width:900px; background-color: Red; height:200px;position:fixed; bottom:0px;}

ihefe 2010-07-16

打赏
举报

用JS (建议用JQUERY库) + DIV+CSS

布局好头部和尾部 , 尾部固定,头部根据浏览器的高度相应的变化.
下面是JQUERY 写的想用要包含这个文件,也可以把他的代码拷贝保存
<script src="http://code.jquery.com/jquery-1.4a2.min.js"></script>



index_bdTemplate('#bdTemplate');//#bdTemplate是要变化的DIV



function index_bdTemplate(ElementId){

	var bodyHeight=$(window).height();//BODY高度

	var xx=150;//这是值自己调整

	var DIVheight=bodyHeight-xx;

	$(ElementId).css({height:DIVheight});//设置元素初始高度

	$(window).resize(function(){//浏览器变化时触发事件

		var bodyHeightNew=$(window).height();//这是重新获得浏览器BODY高度

		var DIVheightNew=bodyHeightNew-xx;

		$(ElementId).css({height:DIVheightNew});

	});

}