水平滚动时固定菜单与页脚，修复布局异常问题求助

我看了你的代码，目前核心问题是固定定位元素的位置和层级没合理设置，加上内容区域没给固定的header和footer留出空间。下面分步骤解决你的三个需求：

1. 固定Footer在页面底部 #

原来的footer只加了position:fixed但没指定垂直位置，所以不会固定在底部。修改后：

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding: 15px 0; /* 调整内边距让内容更美观 */
  color: #ccc;
  position: fixed;
  bottom: 0; /* 强制固定在视口底部 */
  width: 100%; /* 铺满整个页面宽度 */
  background: #5B0123; /* 添加背景色，避免下方内容穿透显示 */
}

2. 让Nav菜单居中显示并与Header协调 #

原来的nav单独设置了position:fixed，导致和header重叠。我们可以把nav放在fixed的header内部，利用header的定位容器，同时确保nav居中：

header {
  margin: 0;
  padding: 5px 0 0 0;
  width: 100%;
  height: 150px;
  position: fixed;
  top: 0; /* 固定在视口顶部 */
  z-index: 100; /* 确保header在内容上方，不会被遮挡 */
  background: #5B0123;
  border-color: #5B0123;
}

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
  background: #B41C42;
  /* 去掉原有的position:fixed，因为已经在fixed的header容器内 */
}

3. 让水平画廊位于Header与Footer之间且不被遮挡 #

需要给内容区域设置上下外边距，避开固定的header和footer，同时优化水平画廊的布局：

#content {
  margin-top: 150px; /* 等于header的高度，避免内容被header遮挡 */
  margin-bottom: 50px; /* 留出footer的高度，避免内容被footer遮挡 */
  overflow-x: auto; /* 让内容区域独立处理水平滚动，也可以保留页面滚动，看你需求 */
}

#img-container {
  display: flex; /* 使用flex布局让图片容器横向排列，比浮动更稳定 */
  gap: 15px; /* 给图片之间添加间距，提升美观度 */
  padding: 20px;
}

#img-container .picture_holder {
  flex-shrink: 0; /* 防止图片容器被压缩变形 */
}

修改后的完整代码 #

CSS部分 #

/********************************** General **********************************/
body { 
  font-family: 'Roboto', sans-serif; 
  margin: 0; /* 去掉默认body外边距，避免页面出现空白边 */
}
#wrapper { 
  max-width: 100%; /* 调整为100%，适配水平滚动 */
  margin: 0;
  padding: 0;
}
a { text-decoration:none; }

/********************************** Heading **********************************/
header {
  margin: 0;
  padding: 5px 0 0 0;
  width: 100%;
  height: 150px;
  position: fixed;
  top: 0;
  z-index: 100;
  background: #5B0123;
  border-color: #5B0123;
}
#logo { text-align: center; margin: 0; }
h1 { 
  font-family: 'Passion One', cursive; 
  margin: 15px 0; 
  font-size: 5em; 
  font-weight: normal; 
  line-height: 0.8em; 
}
h2 { 
  font-family: 'Comfortaa', cursive; 
  font-size: 1.2em; /* 修复原来的语法错误，补充数值 */
  margin: -5px 0 0; 
  font-weight: normal; 
}

/********************************** Navigation **********************************/
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
  background: #B41C42;
}
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }

/********************************** Body **********************************/
#content {
  margin-top: 150px;
  margin-bottom: 50px;
  overflow-x: auto;
}

/********************************** Footer **********************************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding: 15px 0;
  color: #ccc;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #5B0123;
}
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
.fttext { text-align: center; }

/********************************** Colors **********************************/
/* site body */
body { background-color: #C9BD7C; color: #5B0123; }
/* logo text */
h1, h2 { color: #fff; }
/* links */
a { color: #C86347; }
/* nav link */
nav a, nav a:visited { color: #fff; }
/* selected nav link */
nav a.selected, nav a:hover { color: #F8D295; }

/* 水平画廊样式 */
#img-container {
  display: flex;
  gap: 15px;
  padding: 20px;
}
#img-container .picture_holder {
  flex-shrink: 0;
}
#img-container .picture {
  position: relative;
}
#img-container .captioning .title { 
  margin-top: 12px; 
  font-weight: bold; 
}
#img-container .captioning .caption {}

HTML部分（仅调整了script位置，保持原有结构） #

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Passion+One|Roboto:400,500" rel="stylesheet">
</head>
<body>
<header>
  <a href="index.html" id="logo">
    <h1>Natalie Davis</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">Resume</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<div id="wrapper">
  <section id="content">
    <div id="img-container">
      <div class="picture_holder">
        <div class="picture">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="543" height="600" alt="">
          <div class="captioning">
            <div class="title"><a href="link">link</a> - Test caption and link</div>
            <div class="caption">stuff </div>
          </div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg" width="1094" height="600" alt="">
          <div class="captioning">
            <div class="caption"><i>CAPTION</i></div>
          </div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="http://www.tonyandsonsnurseries.com.au/images/Plants/Frangipani/FruitSaladLarge.jpg" width="352" height="600" alt="">
          <div class="captioning">
            <div class="caption"><i>CAPTION</i></div>
          </div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="http://www.beautifulflowerpictures.com/blog/wp-content/uploads/2008/10/beauty_berry_issai_31.jpg" width="409" height="600" alt="">
          <div class="captioning"></div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="https://freedfromtime.files.wordpress.com/2016/08/farmopolis-flowers-dsc_6487.jpg?w=722&amp;h=600" width="722" height="600" alt="">
          <div class="captioning"></div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="https://www.openfootage.net/Openfootage/Vorschau/00299_GelbeBluete/00299_GelbeBluete_Preview_v01.jpg" width="1064" height="600" alt="">
          <div class="captioning">
            <div class="caption"><i>CAPTION</i></div>
          </div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="https://static.wixstatic.com/media/09a7b6_b09cf68226774f6d8af396d240573130.jpg/v1/fill/w_1495,h_600,al_c,q_85,usm_0.66_1.00_0.01/09a7b6_b09cf68226774f6d8af396d240573130.webp" width="1495" height="600" alt="">
          <div class="captioning"></div>
        </div>
      </div>
      <div class="picture_holder">
        <div class="picture">
          <img src="http://www.besgroup.org/wp-content/uploads/SunbirdBrTh-Costus-JWee-1.jpg" width="530" height="600" alt="">
          <div class="captioning"></div>
        </div>
      </div>
    </div>
  </section>
</div>
<footer class="fttext">
  <a href="http://twitter.com/NatroseDavis"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
  <a href="https://www.facebook.com/natalierosedavis/"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a>
  <p>&copy; 2018 Natalie Davis.</p>
</footer>

<!-- mousewheel java script -->
<script type="text/javascript">
function handle(delta) {
if (delta < 0)
ScrollSmoothly(10, 10, 'right');
else if (delta > 0)
ScrollSmoothly(10, 10, 'left');
else ;
}
function wheel(event) {
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (event.detail) {
delta = -event.detail / 3;
}
if (delta) handle(delta);
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
var repeatCount = 0;
function ScrollSmoothly(scrollPos, repeatTimes, direction) {
if (repeatCount < repeatTimes)
if (direction == 'right')
window.scrollBy(20, 0);
else
window.scrollBy(-20, 0);
else {
repeatCount = 0;
clearTimeout(cTimeout);
return;
}
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "','" + direction + "')", 10);
}
/* Initialization code. */
if (window.addEventListener)
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

效果说明 #

• Header（包含logo和导航）固定在页面顶部，导航自动居中
• Footer固定在页面底部，不会随滚动移动
• 水平画廊位于header和footer之间，不会被两者遮挡，滚动时仅内容区域（或整个页面）水平滚动

内容的提问来源于stack exchange，提问作者nrd1992