Question

我正面临着设置页面样式的问题。

我有一个固定在顶部的标题和一个固定在底部的页脚。页眉和页脚中间有一个表格结构。问题是该表根据页脚下方的内容进行扩展。我需要使用div侧面的滚动条而不是整个页面上的滚动条来固定页眉和页脚之间的表格高度。这应该可以在不同的设备（手机，笔记本电脑和台式机）中自动调节。

谢谢

Answer 1

将表放入div＆amp;根据你的屏幕尺寸给它一个高度（例如：高度：72vh ）并给它 overflow-y：auto 和 overflow-x：hidden 。我认为根据您上面的问题描述，这应该是您的问题的解决方案。并使用媒体查询进行自动调整（ @media only screen and（max-width：600px）{} for mobile）。

如果没有帮助，请分享代码。

Answer 2

您的页眉和页脚具有固定位置和已知高度。因此，向内容块添加顶部和底部边距。顶部和底部边距应分别等于页眉和页脚高度。这些缩进不允许内容落后于固定块。

body {
  margin: 0;
  position: relative;
}

header, footer {
  position: fixed;
  left: 0;
  right: 0;
  
  height: 50px;
  width: 100%;
  background-color: red;
}

header {
  top: 0;
}

footer {
  bottom: 0;
}

div {
  margin: 50px auto;
  max-width: 70%;
  background-color: gray;
}

<header></header>
<div>
  <h1>Header</h1>
  <h3>Subheader</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Content ends here.</p>
</div>
<footer></footer>

将元素定位在两个固定元素之间

2 个答案: