Question

我试图建立一个根据浏览器大小正确扩展的网站。我知道通常需要将所有宽度和高度设置为100％，但是我不知道在页眉和页脚的最小高度和最小高度时如何设置它。学校徽标将位于标题中，如果太小则无法读取，侧边栏中会显示谷歌日历。

我想要做的是设置它，使标题和副标题（深蓝色和深灰色条）设置为固定位置。侧边栏（黑条）设置为固定，以及页脚（浅灰色）。内容部分（白色框）我想成为唯一包含所有新闻和更新的可滚动部分。无论我如何设置它，总是会有不适当的移动。

<!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;
}

Answer 1

我认为你不需要所有的职位：亲戚;如果您正在使用花车，那里的东西。你可以做的另一件事是添加＆＃34; overflow：auto＆＃34;内容div和do＆＃34;溢出：隐藏＆＃34;在其他人。你看过bootstrap了吗？如果您使用bootstrap，这很容易。退房：http://getbootstrap.com/，它使这类东西非常容易。

Answer 2

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

在使用固定和相对位置进行Web布局时遇到问题

2 个答案: