div高度自适应，内容自动换行问题。

时间：2022-08-07 06:01:01

<div id="OUT" style=" height:100% ;width:100%;border: blue 2px solid; "> 

<div id="A" style=" height:400px; width:98%;float:left; border: black 3px solid;margin:10px">
sdfgsdfg
</div> 

<div id="B" style=" height:auto; width:98%;OVERFLOW-y:auto;border:red 1px solid;margin:10px">
sdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfg
sdf
sdv
sdf
</div> 

</div>
d="B" style=" height:外div的高度减去DIV A的高度;

要求div2能在超过高度时出现滚动条
当div B的内容长度超过div B的宽度时自动换行，

B的高度等于外div的高度减去DIV A的高度，怎样获取这个高度？
怎样做？

3 个解决方案

#1

js取下 document.getElementById("OUT").style.height 不过取出来的是100%

你既然设的外div 高度是100% ，他的高度其实就是
document.body.clientHeight 这个是外div的高度

#2

1.有两种方法，但都非正常原因换行，英文字符串被系统默认为一个单词，强制换行实行不了。我所知的有两种方法，原理一样，其中一个是在一朋友那看到的。原文如下：

 
 
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>www.mtime.com 时光网</title> 
<style type="text/css"> 
.wordbreak{word-wrap:break-word;word-break:break-all;-moz-binding: url('wordwrap.xml#wordwrap'); overflow:hidden;} 
.box {width:300px; background:#FF9999; border:1px #FF6699 solid;} 
</style> 
</head> 
<body> 
<div class="wordbreak box">whataboutthisstronggoodclasschsiehfnsawwwmtimecom</div> 
</body> 
</html> 

wordwrap.xml为： 

<?xml version="1.0" encoding="UTF-8"?> 
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> 
<binding id="wordwrap" applyauthorstyles="false"> 
<implementation> 
  <constructor> 
   //<![CDATA[ 
   
   var elem = this; 
   elem.addEventListener('overflow', 
    function() 
    { 
     var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g; 
     
     var txt = elem.innerHTML; 
     var chars = txt.split(''); 
     var newTxt = chars.join('&#8203;');     
     newTxt = newTxt.replace(exp, reconstructTag);     
     elem.innerHTML = newTxt; 
    },false); 
     
    function reconstructTag(_tag) 
    { 
     return _tag.replace(/&#8203;/g, ''); 
    } 
   //]]> 
  </constructor> 
</implementation> 
</binding> 
</bindings> 
 


2.document.getElementById("B").offsetHeight
但如果按照你的思路，改变窗体大小，又要重新获取B的高度？这样很不好，可以考虑改变结构。

#3

ding

#1

js取下 document.getElementById("OUT").style.height 不过取出来的是100%

你既然设的外div 高度是100% ，他的高度其实就是
document.body.clientHeight 这个是外div的高度

#2

1.有两种方法，但都非正常原因换行，英文字符串被系统默认为一个单词，强制换行实行不了。我所知的有两种方法，原理一样，其中一个是在一朋友那看到的。原文如下：

 
 
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>www.mtime.com 时光网</title> 
<style type="text/css"> 
.wordbreak{word-wrap:break-word;word-break:break-all;-moz-binding: url('wordwrap.xml#wordwrap'); overflow:hidden;} 
.box {width:300px; background:#FF9999; border:1px #FF6699 solid;} 
</style> 
</head> 
<body> 
<div class="wordbreak box">whataboutthisstronggoodclasschsiehfnsawwwmtimecom</div> 
</body> 
</html> 

wordwrap.xml为： 

<?xml version="1.0" encoding="UTF-8"?> 
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> 
<binding id="wordwrap" applyauthorstyles="false"> 
<implementation> 
  <constructor> 
   //<![CDATA[ 
   
   var elem = this; 
   elem.addEventListener('overflow', 
    function() 
    { 
     var exp = /<&#8203;\/*[&#8203;_\s="'\w]+>/g; 
     
     var txt = elem.innerHTML; 
     var chars = txt.split(''); 
     var newTxt = chars.join('&#8203;');     
     newTxt = newTxt.replace(exp, reconstructTag);     
     elem.innerHTML = newTxt; 
    },false); 
     
    function reconstructTag(_tag) 
    { 
     return _tag.replace(/&#8203;/g, ''); 
    } 
   //]]> 
  </constructor> 
</implementation> 
</binding> 
</bindings> 
 


2.document.getElementById("B").offsetHeight
但如果按照你的思路，改变窗体大小，又要重新获取B的高度？这样很不好，可以考虑改变结构。

#3

ding
标签：

相关文章