The HTML code is as follows.
If the in the first line is removed, the DIV marked in red below can be displayed. If you add in the first line, the height of the red DIV will become 0px. I originally wanted to set the height via percentage. But this problem occurred. . .
Can any hero help me take a look? Thanks!
< head>
, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <br> /font-awesome.min.css"> <br> /ui-base.css"> <br> .icon.css"> <br> .css"> <br> <link rel="stylesheet" href="css/usericons.css"> <br> <br> microsoft yahei", "Microsoft Yahei E8F6F96C59ED1"; } <br> body, div, ul, li, h1 { margin: 0; padding: 0; } <br> .style-main {margin: 0; padding: 0; width: 100%; height: 100%; background-color: #fcfcfd; overflow: hidden; position: relative; font-size: 2vh;} <br> .style-container {margin:0; padding: 0; width: 100%; height: 50%; background-color: #fcfcfd; overflow: hidden; position: relative; font-size: 2vh;} <br> .style-line1 {margin:0; padding: 0; width: 100% ; height: 20%; background-color: #fcfcfd; overflow: hidden; position: relative;} <br> .style-line2 {margin:0; padding: 0; width: 100%; height: 10%; background- color: #fcfcfd; overflow: hidden; position: relative;} <br> .style-line3 {margin:0; padding: 0; width: 100%; height: 50%; background-color: #fcfcfd; overflow: hidden ; position: relative;} <br> .style-line4 {margin:0; padding: 0; width: 100%; height: 20%; background-color: #fcfcfd; overflow: hidden; position: relative;} <br> .news { margin: 0; } <br> .news ul { list-style: none; } <br> .news-arean { margin:0; padding: 0; width: 100%; height: 100%; background -color: #fcfcfd; overflow: hidden; position: relative; } <br> .news-box { margin:0; padding: 0; width: 100%; height: 20%; background-color: #fcfcfd; overflow: hidden; position: relative; font-size: 2vh;} <br> .news-interval { margin:0; padding: 0; width: 100%; height: 5%; background-color: #fcfcfd; overflow: hidden; position: relative; } <br> .news h1 { margin-bottom: 15px; padding-left: 20px; color: #370188; } <br> .news-list { position: absolute; } <br> .news-list li { width: 100%; height: 100%; line-height: 100%; overflow: hidden; word-wrap: normal; font-size: 1em;} <br> .news-list li a { text-decoration: none; color: #000; } <br> .news-list li a:hover { <br> -webkit-transition: color .2s linear, background-color .3s linear; <br> -moz-transition: color .2s linear, background-color .3s linear; <br> -ms-transition: color .2s linear, background-color .3s linear; <br> -o-transition: color .2s linear, background-color .3s linear; <br> transition: color .2s linear, background-color .3s linear; <br> color: #FF4400; <br> text-decoration: underline; <br> } <br> .news-list li a:visited { color: #290065; } <br> </style> <br> <br> </head> <br> <body class="um-vp bc-bg" ontouchstart="" style="font-size: 16px; height:100%;"> <br> <div class="ub ub-ver uinn-m uof style-main" id="mito"> <br> <br> <div class="ub ub-ver uinn-m uof"> <br> <div class="ub ub-ver ubb bc-border style-container"> <br> <div class="uinn ub ub-ac ub-pc style-line1"> <br> <div class="usericon-default ub-img umhw2 umar-a"></div> <br> <div class="ub-f1 uinn-mtxt ut-s">Aimee</div> <br> <div class="ub-f1 uinn-mtxt ut-s">F</div> <br> <div class="ub-img res-arrow umw1 umh1">2-28</div> <br> </div> <br> <div class="ulev-app2 bc-text ut-s style-line2"></div> <br> <div class="ub ub-ver style-line3" id="arean"> <br> <div id="J_Roll_Container" class="news-box"> <br> <ul class="J_Roll_Content news-list" id="li"> <br> <li></li> <br> </ul> <br> </div> <br> <div id="J_Roll_Container" class="news-box"> <br> <ul class="J_Roll_Content news-list" id="li"> <br> <li></li> <br> </ul> <br> </div> <br> <div id="J_Roll_Container" class="news-box"> <br> <ul class="J_Roll_Content news-list" id="li"> <br> <li></li> <br> </ul> <br> </div> <br> <div id="J_Roll_Container" class="news-box"> <br> <ul class="J_Roll_Content news-list" id="li"> <br> <li></li> <br> </ul> <br> </div> <br> <div id="J_Roll_Container" class="news-box"> <br> <ul class="J_Roll_Content news-list" id="li"> <br> <li></li> <br> </ul> <br> </div> <br> </div> <br> <div class="ub ub-f1 c-bad bc-text-head ub-ac uinn-m umar-b style-line4"> <br> <div class="ub-img res-order umwh-m">评论图标</div> <br> <div class="ub-f1 uinn-mtxt ut-s">评论数量100</div> <br> <div class="ub-img res-arrow umw1 umh1">赞</div> <br> <div class="ub-img res-arrow umw1 umh1">9999+</div> <br> <div class="ub-img res-arrow umw1 umh1">回复图标</div> <br> <div class="ub-img res-arrow umw1 umh1">发射弹幕</div> <br> </div> <br> </div> <br> </div> <br> </div> <br> < </script> <br> ) <br> function mito( ) { <br> var arrData = [{ <br> "usericon" : "usericon-default", <br> "username" : "Aimee", <br> "usergender" : "F", <br> "date " : "2-28", <br> "title" : "This is the main text. If it is too long, it needs to be truncated. ", <br> "replynum" : "100", <br> "supportnum" : "9999" <br> }, { " : "M", <br> "date" : "2 -28", <br> "title": "This is the main text. If it is too long, it needs to be truncated. Hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha", <br> "replynum": "100", <br> "supportnum " : "9999 " "usergender" : "M", <br> "date " : "2-28", <br> "title" : "This is the main text. If it is too long, it needs to be truncated. Hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha" "usericon" : "usericon-default", <br> "username" : "Daniel", <br> "usergender" : "M", <br> "date" : "2-28", <br> "title" : "这是正文，如果超长，需要截断。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈", <br> "replynum" : "100", <br> "supportnum" : "9999+" <br> }]; <br> <br> var tmpl = ' <div class="ub ub-ver ubb bc-border style-container">' <br> + ' <div class="uinn ub ub-ac ub-pc style-line1">' <br> + ' <div class="${usericon} ub-img umhw2 umar-a"></div>' <br> + ' <div class="ub-f1 uinn-mtxt ut-s">${username}</div>' <br> + ' <div class="ub-f1 uinn-mtxt ut-s">${usergender}</div>' <br> + ' <div class="ub-img res-arrow umw1 umh1">${date}</div>' <br> + ' </div>' <br> + ' <div class="ulev-app2 bc-text ut-s style-line2">${title}</div>' <br> + ' <div class="ub ub-ver style-line3" id="arean">Arean' <br> + ' <div id="J_Roll_Container" class="news-box">' <br> + ' <ul class="J_Roll_Content news-list" id="li">' <br> + ' <li></li>' <br> + ' </ul>' <br> + ' </div>' <br> + ' </div>' <br> + ' <div class="ub ub-f1 c-bad bc-text-head ub-ac uinn-m umar-b style-line4">' <br> + ' <div class="ub-img res-order umwh-m">评论图标</div>' <br> + ' <div class="ub-f1 uinn-mtxt ut-s">评论数量${replynum}</div>' <br> + ' <div class="ub-img res-arrow umw1 umh1">赞</div>' <br> + ' <div class="ub-img res-arrow umw1 umh1">${supportnum}</div>' <br> + ' <div class="ub-img res-arrow umw1 umh1">回复图标</div>' <br> + ' <div class="ub-img res-arrow umw1 umh1">发射弹幕</div>' <br> + ' </div>' <br> + ' </div>'; <br> var s = appcan.tempRenderList(tmpl, arrData, appcan.getObjLength(arrData)); setAttribute("class" , "ub ub-ver uinn-m uof"); <br> d.innerHTML = s; <br> $('#mito')[0].appendChild(d); <br> } <br> < /script> After that, the html tag will be automatically added with a height. The height is set according to the browser height. When you add <!DOCTYPE HTML>, the height will not be added to the html tag, and all your internal divs will be It is a percentage control. When the html tag does not have a height attached, the internal div height loses reference, so the height becomes 0. If you need to solve this problem, just add the height to the body or html <br> <br> After some debugging, I found that it was caused by the second layer div in the Body: <div class="ub ub-ver uinn-m uof"> not setting height: 100%. Adding it solved the problem. Thanks! <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="htmlcss note tag default value style reset css reset(2)_html/css_WEB-ITnose" href="https://m.php.cn/faq/274486.html">htmlcss note tag default value style reset css reset(2)_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="htmlcss note tag default value style reset css reset(2)_html/css_WEB-ITnose" href="https://m.php.cn/faq/274489.html">htmlcss note tag default value style reset css reset(2)_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
