gpt4 book ai didi

html - 安排三个div

转载 作者:太空宇宙 更新时间:2023-11-04 14:29:26 25 4
gpt4 key购买 nike

我正在尝试制作网页布局。

页眉垂直占据页面的前 15%。正文部分占中间的70%。页脚占据最后 15%。

这是我的三个 div 基本布局:

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

如何在 CSS 中实现?

输出应该类似于 HTML4 中的:

<frameset rows="15%, 75%, *">
<frame />
<frame />
<frame />
</frameset>

--- 更新:我忘记检查之前的参数 + 整个结构

好的:我想我应该将整个结构复制并粘贴到这里。你们提供给我的那些很棒,但没有成功

<body>

<div id ="nav-header">
<ul class="nobullet">
<li><a href="">Exhibit</a></li>
<li><a href="">Class</a></li>
<li><a href="">Faculty</a></li>
<li><a href="">Enterprises</a></li>
<li><a href="">About</a></li>
</ul>
</div>

<div id="main-container">
&nbsp;
<div id="extended"></div>
</div>

<div id="footer">
<table id="info" bordercolor="black" rules="all">
<tr>
<td colspan="3">You're here: <div id="where"></div></td>
</tr>

<tr>
<td><ul class="nobullet">
<li><a href="">Intro</a></li>
<li><a href="">Hire</a></li>
<li><a href="">Collaboration</a></li>
<li><a href="">Thanks</a></li>
</ul></td>

<td><ul class="nobullet">
<li><a=href=""><img src="" alt=""></a></li>
<li><a=href=""><img src="" alt=""></a></li>
<li><a=href=""><img src="" alt=""></a></li>
</ul></td>
<td>&nbsp;</td>
</tr>

<tr>
<td colspan="3">&copy;2013
</td>
</tr>
</table>
</div>

</body>

顺便说一句:我正在使用 Chrome。

--- 更新:问题已解决...感谢 3dgoo 在这里发表评论

最佳答案

http://jsfiddle.net/aWkzB/

<style>
html, body {
height: 100%;
}

#header { height: 20%; background-color: blue; }
#main { height: 75%; background-color: red; }
#footer { height: 5%; background-color: green; }
</style>

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

关于html - 安排三个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19286605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com