如何使html布局像我的形象？

Question

如何在html中定义此布局以填充屏幕中的所有可用空间？

Answer 1

你好像是个新手。

<div> tags will be used four times.

首先<div>将成为您的标题分组 第二个<div>将是您的导航区域＆＃34; MENU PANEL＆＃34;
第三个<div>将成为你的主体 和
第四个<div>将成为你的页脚。

使用填充属性删除边框与分区之间的空格 手动使用宽度和高度。 多数民众赞成。

Answer 2

尝试这样的事情：

HTML:
<div id = 'topPanel'>...CONTENT...</div>
<div id = 'menuPanel'>...CONTENT...</div>
<div id = 'bottomPanel'>...CONTENT...</div>
<div id = 'contentMain'>...CONTENT...</div>

CSS:
#topPanel{
position:fixed;
top:0px;
left:0px;
width:100%;
height:60px;
background: //YOUR COLOUR HERE
}

#menuPanel{
position:fixed;
top:60px;
left:0px;
width:20%;
height:100%;
padding-top:60px;
background: //YOUR COLOUR
}

#bottomPanel{
position:fixed;
bottom:0px;
left:40%;
width:100%;
height:60px;
background: //YOUR COLOUR
}

#contentMain{
position:fixed;
top:60px;
left:20%;
width:80%;
height:100%;
padding-bottom:60px;
background: //YOUR COLOUR
}

使用百分比值而非全像素值将允许您充分利用用户屏幕的潜力，因为它完全填满，而不是保持静态定位。

祝你好运！

P.S。请提出与代码错误相关的问题，而不是大型解决方案。

Answer 3

<div style="width:100%; height:40px; background-color:red"> Top Panel </div>
<div style="width:80%; height:500px; background-color:orange; float:right">Dynamic Panel</div>
<div style="width:20%; height: 500px; background-color:yellow; float:left">Menu Panel</div>
<div style="clear:both">
<div style="width:100%; height:40px; background-color:green">Bottom Panel</div>