css vertical line in the middle of web page_html/css

css vertical line in the middle of web page_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:06:45

Original

1643 people have browsed it

(The original address of this picture is as follows: http://demo.dtcms.net/news/5.html)

I would like to ask:
What should be done with the vertical line in the middle? Write, if I focus on the div on the left, I write: border-right:1px solid; In this case, once the height of the content on the left is lower than the content on the right, the vertical line will not be able to reach the bottom. This can also be seen from the page provided. problem, but when the div on the right is the main one, there will still be this problem

How to solve this problem?
How should I write html?

Reply to discussion (solution)

You can adopt a equal height layout. No matter how the left and right content changes, the height of the two parts will always remain the same. You can Try adding text content to the left or right side to see the effect

<!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" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf">	<div class="left">    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常    </div>    <div class="right"></div></div></body></html>

Copy after login

You can adopt a equal height layout. No matter how the left and right content changes, the height of the two parts will always remain the same. You can try Add text content to the left or right side to see the effect

<!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" /><style>.box{width:900px;margin:auto; border-top:solid 2px #ccc; border-right:solid 2px #ccc; overflow:hidden;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc;padding-bottom:2000px;margin-bottom:-2000px; background:#FF0;}.right{width:300px;padding-bottom:2000px;margin-bottom:-2000px; background:#FCF;}</style><title>无标题文档</title></head><body><div class="box cf">	<div class="left">    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常    </div>    <div class="right"></div></div></body></html>

Copy after login

In this way, you need to set padding-bottom:2000px, but if the height is greater than 2000, there will be a problem. I don’t know. Is there any other way?

You can also achieve similar effects through script control

<!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" /><style>.box{width:900px;margin:auto; border:solid 2px #ccc;}.cf:after{display:block;content:'';clear:both;}.cf{zoom:1;}.box div{float:left;}.left{width:598px; border-right:solid 2px #ccc; background:#FF0;}.right{width:300px;background:#FCF;}</style><title>无标题文档</title><script>window.onload=function(){	var oLeft=document.getElementById('left');	var oRight=document.getElementById('right');	oLeft.style.height=oRight.style.height=Math.max(oLeft.offsetHeight,oRight.offsetHeight)+'px';}</script></head><body><div class="box cf">	<div class="left" id='left'>    	在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常有利。        在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常在工信部透露TDD-LTE频谱规划后，知情人士向新浪科技透露称中国联通可能获发的4G牌照和频谱资源，据悉，中国联通将获得的4G牌照为FDD-LTE，而使用的4G频率将可与3G共用，这样将有利于联通3G向4G平滑过渡，对联通对4G非常通对4G非常    </div>    <div class="right" id='right'></div></div></body></html>

Copy after login