如何使 html 布局像我的图像？ [关闭]答案

【问题标题】：How to make html layout like my image? [closed]如何使 html 布局像我的图像？ [关闭]
【发布时间】：2014-12-24 23:34:08
【问题描述】：

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

【问题讨论】：

这个网站不是寻求完整解决方案的好地方。我们很乐意帮助改进或修改损坏的代码，但不太可能从无到有提供解决方案。也就是说，您可能希望查看 Bootstrap 框架来创建类似于您的图像的东西。 getbootstrap.com
philipwalton.github.io/solved-by-flexbox/demos/holy-grail

标签： html css layout

【解决方案1】：

你好像是个新手。

<div> tags will be used four times.

第一个 <div> 将是您的标题分区
第二个<div> 将是您的导航区域“菜单面板”
第三个<div> 将是你的主体
和
第四个<div> 将是您的页脚。

使用 padding 属性删除边框和分区之间的空格手动使用宽度和高度。就是这样。

【讨论】：

【解决方案2】：

<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>

【讨论】：

【解决方案3】：

试试这样的：

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
}

使用百分比值而不是完整的像素值可以让您充分发挥用户屏幕的潜力，因为它会完全填满，而不是保持静态定位。

祝你好运！

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

【讨论】：