我正在尝试制作一个可以根据浏览器大小适当缩放的网站。我知道通常需要将所有宽度和高度设置为 100%，但是当页眉和页脚有最小高度和最小高度时，我不知道如何设置它。学校 Logo 将位于页眉中，太小时难以辨认，侧边栏中将显示谷歌日历。
我想做的是将标题和副标题(深蓝色和深灰色条)设置为固定位置。侧边栏(黑色条)设置为固定，以及页脚(浅灰色)。内容部分(白框)我想成为唯一包含所有新闻和更新的可滚动部分。无论我如何设置，总有一些东西移动不当。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
和CSS
#header-container{
width:100%;
height:96px;
position:relative;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:100%;
position:relative;
padding-bottom:55px;
background-color:pink;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
最佳答案
将 z-index:10 添加到#header-container....你所有的问题都将得到解决!!
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Website Layout Test
</title>
<style>
#header-container{
width:100%;
height:96px;
position:relative;
z-index: 10;
}
#header{
width:100%;
background-color:#013066;
height:60px;
position:fixed;
}
#sub-header{
width:100%;
background-color:grey;
margin-top:60px;
height:36px;
position:fixed;
}
#content-container{
width:100%;
height:1021px;
position:relative;
padding-bottom:55px;
}
#content{
background-color:white;
float:left;
height:100%;
width:100%;
position:relative;
border: 10px solid red;
}
#sidebar{
width:315px;
height:100%;
background-color:black;
position:fixed;
right:0px;
}
#footer{
position:fixed;
bottom:0px;
height:40px;
width:100%;
background-color:#f6f6f6;
}
</style>
</head>
<body>
<div id="header-container">
<div id="header"></div>
<div id="sub-header"></div>
</div>
<div id="content-container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
关于html - 使用固定位置和相对位置制作 Web 布局时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31522629/