Heim > Artikel > Web-Frontend > 左右两边高度自适应，右边宽度为浏览器宽度-200px。这个是怎么理解的呀？_html/css_WEB-ITnose
左右两边高度自适应，右边宽度为浏览器宽度-200px。这个是怎么理解的呀？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:28:371791Durchsuche
按照图片那样的排版，但是，但是，错了。求正确写法？先谢谢各位啦~~~
不理解右边的那个宽度是怎么写的？还有不知道错了，是不是右边的宽度计算错误了？
<!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>body { margin:0px 0px; padding:0px 0px; color:#fff; text-align:center;}#header { background:#0175ed; height:120px; line-height:120px;}#header, #footer, #container { margin: 0px auto; width: 100%;}#contentWrap { margin-left: -200px; float:right; width: 100%; background:#86aef7}#content { margin-left: 200px;}#side { float:left; width: 200px; background:#55a3f3;}#contentWrap,#side{ min-height: 500px; height: auto !important; height: 500px;}#footer { clear: both; background:#0175ed; height:50px; line-height:50px;}</style></head><body><div id="container"><div id="header">高度120px</div><div id="main"><div id="contentWrap"><div id="content">右边宽度100%-200px</div></div><div id="side">左边宽度200px</div></div><div id="footer">底部高度50px</div></div></body></html>
回复讨论(解决方案)
右边宽度100%-200px
左边宽度200px
--》
右边宽度100%-200px
左边宽度200px
width：100%
position: abusote;
left ： 0px;
用padding-left:200px; 来占位吧
右边宽度100%-200px
左边宽度200px
--》
右边宽度100%-200px
左边宽度200px
所以，你这个回复是什么意思呢？
左
高度 自适应 老的浏览器可能不行 所以要 写js计算把
左
高度 自适应 老的浏览器可能不行 所以要 写js计算把 右边=浏览器宽度-200px，这个怎么理解的呀？
这样做可以实现以上所说布局
<!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>body { margin:0px 0px; padding:0px 0px; color:#fff; text-align:center;}#header { background:#0175ed; height:120px; line-height:120px;}#header, #footer, #container { margin: 0px auto; width: 100%;}#right,#side{ min-height: 500px; height: auto !important; height: 500px;}#side { float:left; width: 200px; background:#55a3f3;}#right { background:#86aef7}#footer { clear: both; background:#0175ed; height:50px; line-height:50px;}</style></head><body><div id="container"> <div id="header">高度120px</div> <div id="main"> <div id="side">左边宽度200px</div> <div id="right">右边宽度100%-200px</div> </div> <div id="footer">底部高度50px</div></div></body></html>
这样做可以实现以上所说布局
<!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>body { margin:0px 0px; padding:0px 0px; color:#fff; text-align:center;}#header { background:#0175ed; height:120px; line-height:120px;}#header, #footer, #container { margin: 0px auto; width: 100%;}#right,#side{ min-height: 500px; height: auto !important; height: 500px;}#side { float:left; width: 200px; background:#55a3f3;}#right { background:#86aef7}#footer { clear: both; background:#0175ed; height:50px; line-height:50px;}</style></head><body><div id="container"> <div id="header">高度120px</div> <div id="main"> <div id="side">左边宽度200px</div> <div id="right">右边宽度100%-200px</div> </div> <div id="footer">底部高度50px</div></div></body></html> 是可以实现，但是，我想知道右边的宽度计算。你这个写法不对吧~~~ Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：为何js文件后面加一个参数？这样就会自动刷新本地js文件的缓存了么？_html/css_WEB-ITnoseNächster Artikel：jQuery each循环错误在哪里哦？_html/css_WEB-ITnose