ホームページ > 記事 > ウェブフロントエンド > 左側と右側の高さは適応され、右側の幅はブラウザの幅-200pxになります。これをどう理解しますか? _html/css_WEB-ITnose
左側と右側の高さは適応され、右側の幅はブラウザの幅-200pxになります。これをどう理解しますか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:28:371792ブラウズ
レイアウトは写真の通りですが、でも、間違っています。正しく書いてください?よろしくお願いします~~~
右側の横幅の書き方が分かりません？間違っているかどうかはわかりませんが、右側の幅の計算が間違っていますか？
ディスカッション (解決策) に返信
845bc0347d2f48a149098cc22d7a5f95右幅 100%-200px16b28748ea4df4d9c2150843fecfba68
d9cceb148c0803187012974dcd78dd18左幅 200px16b28748ea4df4d9c2150843fecfba68
--》
845bc0347d2f48a149098cc22d7a5f95右幅 100%-200px16b28748ea4df4d9c2150843fecfba68
c9cc9f1bce3885b819bebafd3976edaf左幅 200px325b94d06936b1d0ee2339101c5bc027
width: 100%
left: 0px;
996ef62cef12cd535ee33a989b46bb66右幅 100%-200px16b28748ea4df4d9c2150843fecfba68
c9cc9f1bce3885b819bebafd3976edaf左幅 200px16b28748ea4df4d9c2150843fecfba68
" " c9cc9f1bce3885b819bebafd3976edaf左幅 200px16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
それで、この返信はどういう意味ですか?
236d7891ae4e66774768c6e004f301cc 93eff3df0b5b3eaaccecf62b6fec101516b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
c012da87367b95e8577c96d5bc41bbd0 : 青 ;幅: 200px;高さ: 300px;位置: 絶対;左: 0;上:0">左16b28748ea4df4d9c2150843fecfba68
fe4d9c0694eb493b7a6ac8b814a1091716b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
高さ適応型は動作しない可能性があるため、次のように記述する必要があります。 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%;}#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>
これで上記のレイアウトが実現できます
<!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> は実現可能ですが、右辺の幅の計算が知りたいです。書き方間違ってませんか～～～