HTML页面布局问题
发布网友
发布时间：2022-04-23 15:06
共5个回答
热心网友
时间：2022-05-12 14:29
如下：
<!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=gb2312" />
<title>div+CSS布局</title>
<style>
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:900px;}
#header { height:100px; background:#6cf; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#9ff;}
#content { float:right; width:695px; height:500px; background:#cff;}/*因为是固定宽度，采用左右浮动方法可有效避免ie 3像素bug*/
#footer { height:60px; background:#6cf;}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="mainContent">
<div id="sidebar">sidebar</div>
<div id="content"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>追问1、mainContent、sidebar、content 的高度不能用px定死，需要根据浏览器的大小、电脑的分辨率自适应。
2、footer始终固定在浏览器的最底部。
3、关于滚动条，不是出现在整个浏览器的右边，而是出现在content的右边（浅蓝色的右边）。
热心网友
时间：2022-05-12 15:47
简单 用框架 或者 overflow:auto 前者是固定好框架宽度 相当于4个不同页面 后者是在样式里面定义 不能超过特定的宽度或高度 否则就会有滚动条追问方便的话，请直接给出页面代码吧。我尝试了很多，但还是有问题
追答先看看别人的 不行的话晚上再说 现在有点忙
热心网友
时间：2022-05-12 17:22
<!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=gb2312" />
<title>div+CSS布局</title>
<style>
body { font-family:Verdana; font-size:14px; margin:0;}
#nav {
background-color: #85d9;
width: 100%;
height: 50px;
}
#mid {
background-color: #cc85d9;
width: 100%;
position: absolute;
top: 50px; bottom: 50px;
left: 0px;
}
#menu {background-color:#ffff99;height:100%;width:30%;float:left;}
#content {background-color:#EEEEEE;height:100%;width:70%;float:left;overflow: auto;}
#footer {
background-color: #aa85d9;
width: 100%;
height: 50px;
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="nav">nav</div>
<div id="mid">
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
热心网友
时间：2022-05-12 19:13
css :
.mainContent{
overflow-y:scroll ;
height:500px;
}追问mainContent的高不能用px，height:100%;
热心网友
时间：2022-05-12 21:21
怎么有点像试题？
