Home >Web Front-end >HTML Tutorial >div css page layout, how to set the content height to 100% instead of specific pixels_html/css_WEB-ITnose
div css page layout, how to set the content height to 100% instead of specific pixels_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:311672browse
I found some examples, but the content height can only use specific pixels. If you use percentages, the height displayed in the browser will be 0.
HTML5 should no longer support frames, but the csdn forum is still using frameset. How to use div css to replace the frame effect? Thanks!
[csdn frame source code]
6b1b14bbf1f6907c483e645d9be1930a
23cc983d740e59c167eb9e2a749c1825
6f2949192b943f1f50ecd85022d926df
eb5f059992a0ae0ef16884cb75644e40
[DIV CSS source code]
45d435423cc155213901ab1af45208ec
8ca2b4eb17525146e680c309e9dfa6a5
25f64f3fe53f082cb34aea85a4f22849This is the sidebar16b28748ea4df4d9c2150843fecfba68
845bc0347d2f48a149098cc22d7a5f95The left side of the 2 columns is fixed, Adaptive width on the right side, seamless in the middle??bf7dbd188c0a78f88bcb7442f92ef7d4Standard Roadwww.aa25.cn5db79b134e9f6b82c0b36e0489ee08ed403f97ed4677ac506b129bf7795a55c9fa9b980f2e48b4a1bfef0b53328cf2fc2cacc6d41bbb37262a98f745aa00fbf054bdf357c58b8a65c66d7c19c8e4d114 df250b2156c434f3390392d09b1c9563
;
16b28748ea4df4d9c2150843fecfba68
Reply to discussion (solution)
js resize adjustment
Looking for answers downstairs. . .
Correct answer on the 1st floor, you need to use js resize
The specific usage is: get the height of the page window, then assign the height value to content, use the window function resize when the window size changes, and calculate the window again Just assign the height to the content
2. Pure CSS
<!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>html, body { width:100%; height:100%; margin:0; padding:0;}</style></head><body><style type="text/css">#container {margin:0 auto; width:100%;height:100%}#sidebar { float:left; width:200px; height:100%; background:#9c6;}* html #sidebar{margin-right:-3px;}/*使用此方法解决ie 3像素bug可通过验证*/#content { height:100%; background:#ffa;}</style><div id="container"> <div id="sidebar">This is the sidebar</div> <div id="content">2列左侧固定，右侧自适应宽度，中间无缝型??<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><span style="display:none"> <script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script> </span><br /> <br /> <a href="/layout/29.(l+∽).rar">下载此模板</a></div></div></body></html> Thank you! The purpose is to be more consistent with HTML5. The compatibility of such complex CSS in various browsers may be a problem. Let’s use table. Thanks again!
Correct answer on the 1st floor, you need to use js resize
The specific usage is: get the height of the page window, and then assign the high value to the content, use the window function resize when the window size changes, Just calculate the height of the window again and assign it to the content
js resize adjustment