搜索
查看: 3322|回复: 2

[CSS] 已解决 HTMLayout 高度设置

  [复制链接]

47

主题

178

帖子

1167

积分

荣誉会员

Rank: 8Rank: 8

积分
1167
发表于 2013-2-3 19:58:32 | 显示全部楼层 |阅读模式
本帖最后由 朴实 于 2013-2-3 23:42 编辑

右侧的div#up, div#down高度应该是200PX 和 100%%,但是不知道什么原因没有占满100%,这个是什么原因呢?
  1. import win.ui;
  2. /*DSG{{*/
  3. var winform = ..win.form( bottom=399;parent=...;right=599;text="aardio Form" )
  4. winform.add(  )
  5. /*}}*/

  6. import web.layout;
  7. import web.layout.behavior.tabs;

  8. var wbLayout = web.layout(winform);
  9. wbLayout.html =/***
  10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  11. <html>
  12.         <head>
  13.                 <title>%% units demonstartion</title>
  14.                 <style>
  15. body { font-family: Verdana, Arial, sins-serif;        font-size: 10pt; width:100%%; height:100%% }
  16. p { margin:0; }
  17. p.comment { font-size: 8.5pt; }

  18. #main /* main section: contains leftbar and rightbar */
  19. {
  20.         width:100%%;
  21.         height:100%%;
  22.         border: 1px dotted blue;
  23.         flow:horizontal;
  24. }
  25. #leftbar
  26. {
  27.         margin:6px;
  28.         padding:2px;
  29.         width:120px;
  30.         height:100%%;
  31.         border: 1px solid black;
  32.         text-align:center;
  33. }
  34. #up{
  35.         background: red;
  36.         height: 200px;
  37. }
  38. #down{
  39.         background: green;
  40.         height: 100%%;
  41. }
  42. #rightbar
  43. {
  44.         margin:6px;
  45.         text-align:center;
  46.         width:100%%;
  47.         padding: 50%% 2px; /* place its content in the middle*/
  48.         border: 1px solid red;
  49.         background: blue;x
  50. }


  51.                 </style>
  52.         </head>
  53.         <body>
  54.                 <div id="main">
  55.                         <div id="leftbar">
  56.                                 <p>Left sidebar content</p>

  57.                         </div>

  58.                         <div id="rightbar">
  59.                                 <div id="up">part up</div>
  60.                                 <div id="down">part down</div>

  61.                         </div>
  62.                 </div>
  63.         </body>
  64. </html>

  65. ***/

  66. wbLayout.onButtonClick = function (ltTarget,ltEle,reason,behaviorParams) {
  67.        
  68. }

  69. winform.show()
  70. win.loopMessage();

  71.                           
复制代码
回复

使用道具 举报

4

主题

874

帖子

4704

积分

荣誉会员

Rank: 8Rank: 8

积分
4704
发表于 2013-2-3 20:46:11 | 显示全部楼层

[code][lang=css,false] #rightbar { height:100%%; /*padding: 50%% 2px; */


  1. #rightbar
  2. {
  3.         height:100%%;
  4.         /*padding: 50%% 2px; */
  5. }
复制代码
这样就行了,指定相对高度时,父节点一定要指定高度。
另外你指定了内边距为50%%,怎么可能再撑满?!
回复

使用道具 举报

47

主题

178

帖子

1167

积分

荣誉会员

Rank: 8Rank: 8

积分
1167
 楼主| 发表于 2013-2-3 21:17:56 | 显示全部楼层

[quote][size=2][color=#999999]不争 发表于 2013-2-3 20:46[/color] [url=forum.php?mod=r

不争 发表于 2013-2-3 20:46
这样就行了,指定相对高度时,父节点一定要指定高度。
另外你指定了内边距为50%%,怎么可能再撑满?!

明白了,谢谢。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-16 19:09 , Processed in 0.062500 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表