div内容自适应的问题

yenyen_421 2009-08-11 02:59:09
如何使白色区域的div（<div class="container">）自适应显示，也就是能根据屏幕的大小，内容的多少，自动出现滚动条

<!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 {margin: 0;padding: 0 !important;padding: 55px 0 16px;*padding: 55px 0 16px !important;height: 100%;overflow :hidden;}
body {margin: 0;padding: 0 !important;*padding: 0 0 16px !important;padding: 0 0 16px;height: 100%;overflow: hidden;}
.header{width:100%;height:55px;background-color:#FFC;position:absolute;top:0;}
.middle{position: absolute !important;*position: relative !important;position: relative;top: 55px!important;*top: 0 !important;top: 0;left: 0;bottom: 16px;width:100%;overflow: hidden;height: auto !important;*height: 100% !important;height: 100%;}
.left{width:170px;height:100%;background-color:#6FC;float:left;}
.right{margin:0 0 0 170px;background-color:#fff;height:100%;}
.footer{width:100%;height:16px;background-color:#3CF;position:absolute; bottom:0;}
.bar{width:100%;height:20px;background-color:#eee;}
p{margin:0;margin-bottom:15px;}
.container{overflow:auto;padding:15px;}
</style>
</head>

<body>
<div class="header"></div>
<div class="middle"><div class="left"></div><div class="right"><div class="bar"></div><div class="container">
<p>0</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
</div></div></div>
<div class="footer"></div>
</body>
</html>
...全文
541 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
一束光丫. 2009-08-12
  • 打赏
  • 举报
 回复
up
nanbazhangbiao 2009-08-12
  • 打赏
  • 举报
 回复
在div之间加一个<textarea></textarea>标签。用rows来设置你想要的高度。。
如果有多内容，用可以有滚动条
试试。。。
<div class="container"><textarea rows="10">
<p>0 </p>
<p>1 </p>
<p>2 </p>
<p>3 </p>
<p>4 </p>
<p>5 </p>
<p>6 </p>
<p>7 </p>
<p>8 </p>
<p>9 </p>
<p>10 </p>
<p>11 </p>
<p>12 </p>
<p>13 </p>
<p>14 </p>
<p>15 </p>
<p>16 </p>
<p>17 </p>
<p>18 </p>
<p>19 </p>
<p>20 </p>
<p>21 </p>
<p>22 </p>
<p>23 </p>
<p>24 </p>
<p>25 </p>
</textarea></div>
ziffle 2009-08-12
  • 打赏
  • 举报
 回复
路过接分
筱伟 2009-08-11
  • 打赏
  • 举报
 回复
.container{overflow:auto;padding:15px; height:100%; }
给.container加个最大高度max-height:xxxpx;
powerbyjune 2009-08-11
  • 打赏
  • 举报
 回复
<!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 {margin: 0;padding: 0 !important;padding: 55px 0 16px;*padding: 55px 0 16px !important;height: 100%;overflow :hidden;}
body {margin: 0;padding: 0 !important;*padding: 0 0 16px !important;padding: 0 0 16px;height: 100%;overflow: hidden;}
.header{width:100%;height:55px;background-color:#FFC;position:absolute;top:0;}
.middle{position: absolute !important;*position: relative !important;position: relative;top: 55px!important;*top: 0 !important;top: 0;left: 0;bottom: 16px;width:100%;overflow: hidden;height: auto !important;*height: 100% !important;height: 100%;}
.left{width:170px;height:100%;background-color:#6FC;float:left;}
.right{margin:0 0 0 170px;background-color:#fff;height:100%;}
.footer{width:100%;height:16px;background-color:#3CF;position:absolute; bottom:0;}
.bar{width:100%;height:20px;background-color:#eee;}
p{margin:0;margin-bottom:15px;}
.container{overflow-y:auto;padding:15px;}
</style>
</head>

<body>
<div class="header"> </div>
<div class="middle"> <div class="left"> </div> <div class="right"> <div class="bar"> </div> <div class="container">
<p>0 </p>
<p>1 </p>
<p>2 </p>
<p>3 </p>
<p>4 </p>
<p>5 </p>
<p>6 </p>
<p>7 </p>
<p>8 </p>
<p>9 </p>
<p>10 </p>
<p>11 </p>
<p>12 </p>
<p>13 </p>
<p>14 </p>
<p>15 </p>
<p>16 </p>
<p>17 </p>
<p>18 </p>
<p>19 </p>
<p>20 </p>
<p>21 </p>
<p>22 </p>
<p>23 </p>
<p>24 </p>
<p>25 </p>
</div> </div> </div>
<div class="footer"> </div>
</body>
</html>





注意：.container{overflow-y:auto;padding:15px;height:你的值;}

如果：不显示滚动条自适应高度则 .container{overflow-y:auto;padding:15px_height:你的值;height:你的值;}
container的div高度自适应了但可能出现div溢出超出外层div范围
解决方法：在container的div下加<div id="clear"></div>
css代码：#clear{height:0px;width:0px;clear:both}
夜雨_Jason 2009-08-11
  • 打赏
  • 举报
 回复
换成height:92%，这个数值可以微调一下
yenyen_421 2009-08-11
  • 打赏
  • 举报
 回复
加height:100%是不行的，滚动条最下面被档住了
夜雨_Jason 2009-08-11
  • 打赏
  • 举报
 回复
发错，汗


<!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 {margin: 0;padding: 0 !important;padding: 55px 0 16px;*padding: 55px 0 16px !important;height: 100%;overflow :hidden;} 

body {margin: 0;padding: 0 !important;*padding: 0 0 16px !important;padding: 0 0 16px;height: 100%;overflow: hidden;} 

.header{width:100%;height:55px;background-color:#FFC;position:absolute;top:0;} 

.middle{position: absolute !important;*position: relative !important;position: relative;top: 55px!important;*top: 0 !important;top: 0;left: 0;bottom: 16px;width:100%;overflow: hidden;height: auto !important;*height: 100% !important;height: 100%;} 

.left{width:170px;height:100%;background-color:#6FC;float:left;} 

.right{margin:0 0 0 170px;background-color:#fff;height:100%;} 

.footer{width:100%;height:16px;background-color:#3CF;position:absolute; bottom:0;} 

.bar{width:100%;height:20px;background-color:#eee;} 

p{margin:0;margin-bottom:15px;} 

.container{overflow:auto;padding:15px; height:100%; } 

</style> 

</head> 



<body> 

<div class="header"> </div> 

<div class="middle"> <div class="left"> </div> <div class="right"> <div class="bar"> </div> 

<div class="container"> 

  <p>0 </p> 

  <p>1 </p> 

  <p>2 </p> 

  <p>3 </p> 

  <p>4 </p> 

  <p>5 </p> 

  <p>6 </p> 

  <p>7 </p> 

  <p>8 </p> 

  <p>9 </p> 

  <p>10 </p> 

  <p>11 </p> 

  <p>12 </p> 

  <p>13 </p> 

  <p>14 </p> 

  <p>15 </p> 

  <p>16 </p> 

  <p>17 </p> 

  <p>18 </p> 

  <p>19 </p> 

  <p>20 </p> 

  <p>21 </p> 

  <p>22 </p> 

  <p>23 </p> 

  <p>24 </p> 

  <p>25 </p> 

</div> </div> </div> 

<div class="footer"> </div> 

</body> 

</html>
夜雨_Jason 2009-08-11
  • 打赏
  • 举报
 回复
这样就行了


  <p>5 </p> 

  <p>6 </p> 

  <p>7 </p> 

  <p>8 </p> 

  <p>9 </p> 

  <p>10 </p> 

  <p>11 </p> 

  <p>12 </p> 

  <p>13 </p> 

  <p>14 </p> 

  <p>15 </p> 

  <p>16 </p> 

  <p>17 </p> 

  <p>18 </p> 

  <p>19 </p> 

  <p>20 </p> 

  <p>21 </p> 

  <p>22 </p> 

  <p>23 </p> 

  <p>24 </p> 

  <p>25 </p>
yenyen_421 2009-08-11
  • 打赏
  • 举报
 回复
不能写死高度的，因为要适应不同的内容，内容没越出屏幕范围，还是不要出现滚动条，我觉得要写js计算屏幕高度，然后判断是否需要出现滚动条，小女子不太会写js，麻烦各位帮帮忙
KK3K2005 2009-08-11
  • 打赏
  • 举报
 回复
要设置height的属性和scroll
.container{overflow:scroll;padding:15px;height:300px;}
chokobo 2009-08-11
  • 打赏
  • 举报
 回复
.container{height:100%;overflow:scroll;padding:15px;}
不知道能否满足lz要求
div宽度自适应布局(左边自适应)
div宽度自适应布局(左边自适应)
div宽度自适应布局(右边自适应)
div宽度自适应布局(右边自适应)
使用JS+CSS实现DIV层自适应高度和宽度
用JS+CSS来实现DIV层自适应高度，无论你的浏览器大小如何变化都会自适应高度， 调节宽度同样的道理
html div 自适应剧中 上下左右全部居中
html div 自适应剧中 上下左右全部居中
CSS 实现div宽度根据内容自适应
最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下
CSS

61,115

社区成员

60,728

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章