我是 html 新手。我想做一个简单的布局设计如下:
-------------------------------------
|
-------------------------------------
| | |
| | |
| | |
| | |
|---------------------------| |
____|_________footer____________|___|
但是我的页脚在左右菜单之间没有调整。在左右菜单下方。
下面是我的html代码:
<html>
<head>
<style>
#container {
height: 100%;
width: 100%;
background-color: aqua;
position: relative;
}
#header {
height: 5%;
background-color: #FFA500;
}
#leftmenu {
background-color: #FFD700;
height: 90%;
width: 20%;
float: left;
}
#rightmenu {
background-color: #FFD700;
height: 90%;
width: 10%;
float: left;
}
#content {
style ="background-color: #EEEE12;
height: 85%;
width: 70%;
float: left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
</title>
</head>
<body>
<div id="container" class=".container">
<div id="header" class=".header">
<h1>Main Title of Web Page</h1>
</div>
<div id="leftmenu" class=".leftmenu">
<b>Menu</b><br> HTML<br> CSS<br> JavaScript
</div>
<div id="content" class=".content">Content goes here</div>
<div id="rightmenu" class=".rightmenu">
<b>DashBoard</b><br> Recent<br> Saved Search
</div>
<div id="footer"
style="background-color: #FFA500; clear: both; text-align: center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
最佳答案
所以我在这里所做的是创建一个中间 div。其中包含您的内容和页脚。
你的中间 div 有一个相对位置，我绝对将你的页脚定位在底部。
注意，中间的 div 需要一个高度才能工作。不过这应该不是问题!
如果您还需要什么，请告诉我!
<div id="middle">
<div id="content" class=".content">Content goes here</div>
<div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
Copyright © W3Schools.com
</div>
</div>
</div>
#middle {float: left; width: 70%; height: 80px; position: relative;}
#footer {bottom: 0px; position: absolute; width: 100%}
这是一个 fiddle 示例!
关于css - 在html中调整div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22260606/