Question

我在index.html页面上放置了几个网格视图拇指图像，其中放置了页眉和页脚，因为即使页眉和页脚滚动也会滚动网格图像，我给出了Position：fixed;属性仍然不固定。如果我按下其他页面并返回，则页眉和页脚将被修复，而不是在应用程序启动时。

css代码

#Header { background: #8C001A; 
height: 36px; padding: 0; border-bottom: 1px solid    #3c3c3c; 
 z-index:101; 
 top: 0;
 bottom:80px;
 left: 0;
position: fixed;
right: 0; } 

#Footer { background: #8C001A;
 height: 30px;
 padding: 0; 
 border-bottom: 2px solid #000; 
  z-index:101; 
 bottom:0px;
left: 0;
position: fixed;
right: 0; 
bottom: 0;}

html代码

 <div id="Header"> </div>

 <div id="Footer"> </div>

Answer 1

<强> CSS

body{
   padding:0px;
   margin:0px;
}
#Header {
   background: #8C001A; 
   height: 36px; padding: 0; border-bottom: 1px solid    #3c3c3c; 
   z-index:101; 
   top: 0;
   bottom:80px;
   left: 0;
   position: fixed;
   right: 0; 
} 

#Footer { 
  background: #8C001A;
  height: 30px;
  padding: 0; 
  border-bottom: 2px solid #000; 
  z-index:101; 
  bottom:0px;
  left: 0;
  position: fixed;
  right: 0; 
  bottom: 0;
}

#container{
  height:1600px;
  background-color:#00ffff;
}
#container1{
  height:1600px;
  background-color:#ffff00;
}

<强> HTML

<div id="Header"> </div>
<div id="container"></div>
<div id="container1"></div>
<div id="Footer"> </div>

请在我的身边使用所有浏览器尝试此代码

修复html中页眉和页脚位置的问题

1 个答案: