如何防止页脚 div 与页面内容重叠？

Question

我使用这段代码使用 JSTL 打印表格。该表位于 contentFrame div 中。但是，最初位于底部的页脚开始浮动并与 contentFrame 重叠。不过，我不想将页脚保持在固定位置。有没有办法将其保留在页面底部，以便在添加新内容时将其“下推”？

body {
  background-color: blue;
}
#contentFrame {} #date {
  float: left;
}
#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
  background-color: red;
}
#headerFrame {
  margin-top: 30px;
}
#logOutFrame {
  left: 0px;
  position: absolute;
  text-align: right;
  top: 0px;
  width: 100%;
}
#footerFrame {
  background-color: orange;
  bottom: 0px;
  left: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
}

<div id="logoutFrame">
  <span id="date"> Date </span>
  <span id="userEmail"> blah@email.com </span>
  <a id="signOutLink" href="#"> Sign Out </a>
</div>

<div id="headerFrame">
  <h1>Pointwest Logo</h1>
</div>

<div id="menuFrame">
  <ul>
    <li>A</li>
    <li>B</li>
  </ul>
</div>


<div id="contentFrame">
  // content
</div>



<div id="footerFrame">
  <p>footer</p>
</div>

编辑：使用 bootstrap 中的粘性页脚，它起作用了

Answer 1

解决这个问题的一种方法是：

1. 给#footerFrame一个默认的position: absolute
2. 使用.js监控浏览器视口的高度和#contentframe的高度
3. 如果#contentframe高度超过剩余视口高度，则将#footerFrame更改为position: relative

function positionFooter() {
	    var contentFrame = document.getElementById('contentFrame');
	    var footerFrame = document.getElementById('footerFrame');

	    var contentY = contentFrame.offsetTop;
	    var contentHeight = contentFrame.clientHeight;
	    var viewportHeight = window.innerHeight;
	    var footerHeight = footerFrame.clientHeight;

	    if ((contentY + contentHeight) > (viewportHeight - footerHeight)) {
	            footerFrame.style.position = 'relative';
	        }

	    else {
	            footerFrame.style.position = 'absolute';
	        }
}

window.addEventListener('load',positionFooter,false);
window.addEventListener('resize',positionFooter,false);

body {
background-color: blue;
}

#contentFrame {
height: 300px;
}


#date {
float: left;
}

#logOutFrame,
#contentFrame,
#headerFrame,
#menuFrame {
background-color: red;
}

#headerFrame {
margin-top: 30px;
}

#logOutFrame {
left: 0px;
position: absolute;
text-align: right;
top: 0px;
width: 100%;
}

#footerFrame {
display: block;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: orange;
text-align: center;
}

body, #contentFrame, #footerFrame, #footerFrame p {
margin: 0;
padding: 0;
}

<div id="logoutFrame">
  <span id="date"> Date </span>
  <span id="userEmail"> blah@pointwestcom.ph </span>
  <a id="signOutLink" href="#"> Sign Out </a>
</div>

<div id="headerFrame">
  <h1>Pointwest Logo</h1>
</div>

<div id="menuFrame">
  <ul>
    <li>A</li>
    <li>B</li>
  </ul>
</div>


<div id="contentFrame">
  // content
</div>



<div id="footerFrame">
  <p>footer</p>
</div>

Answer 2

你应该使用<div style="clear:both;"></div>这样在页脚之前清除浮动：

<div style="clear:both;"></div>
<div id="footerFrame">
  <p>footer</p>
</div>

但不需要定位footerFrameabsolute:

#footerFrame {
  background-color: orange;
  text-align: center;
  width: 100%;
}

和要了解更多关于浮动的信息，请查看以下内容： https://css-tricks.com/all-about-floats/

Answer 3

你的内容有多大？

如果你删除'位置：绝对;'或'底部：0px;'从#footerFrame css 开始，页脚将向上移动到页面内容下方。

如果您的内容不够大，无法填满窗口，则可能不需要这样做。

如果您搜索它们，SO 上已经有许多页脚解决方案，它们将向您展示实现适合您的页脚解决方案的多种方法。

Answer 4

编辑注意：这回答了一个不同的问题，因为我认为页眉/页脚需要处于固定位置。根据问题标题留在这里是为了有用，但在其他方面不正确。

如果您能够准确地声明页眉和页脚的高度，这正是 position:fixed 的用途。

注意：我只使用 [attribute] 选择器来加快创建演示的速度！ 在您的实际生产代码中使用类代替 - 这是类的用途，并且不会冒获取的风险未来某个时候会被一些闪亮的新功能所震撼！

http://dabblet.com/gist/a633128f55dbcc160ecc

[head]{
    position:fixed;
    width:100%;
    top:0px;
    height:20px;
    background-color:#ccc;
}
[foot]{
    width:100%;
    position:fixed;
    bottom:0px;
    height:20px;
    background-color:#ccc;
}
[cont]{
    /*set the top margin to the height of the header, plus a bit of buffer*/
    /*set the bottom margin to the height of the header, plus a bit of buffer*/
    margin:25px 0 25px;
}

<div head>
  This is a header
</div>
<div foot>
  This is a footer
</div>
<div cont>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis dui eget ex ullamcorper, id hendrerit lectus semper. Etiam aliquam lacus posuere, tempus quam et, tempus sapien. Sed vitae lobortis urna. Nulla at augue libero. Morbi cursus quam non velit commodo tincidunt. Nulla facilisi. Quisque vitae ante a massa scelerisque accumsan vitae in nibh. Mauris quam augue, gravida et rutrum sit amet, sodales et neque. Proin ullamcorper vulputate mi, ut suscipit nisi pharetra at. Aenean nibh orci, auctor id ex eu, molestie tincidunt velit. Praesent pretium ipsum finibus tortor pretium mollis. In et quam sodales, fermentum metus eget, volutpat lectus. Cras suscipit ipsum ut lectus placerat, vitae eleifend turpis varius. In consectetur nisl semper, maximus urna at, laoreet diam. Sed efficitur eleifend lectus, venenatis sollicitudin eros auctor nec.</p>
    <p>Nunc egestas non diam id lobortis. Phasellus rhoncus, turpis interdum fermentum aliquet, risus enim commodo turpis, ac vestibulum massa neque vitae leo. Praesent non consequat leo, nec dignissim eros. Nullam convallis posuere ligula, eu tincidunt eros posuere vitae. Suspendisse vel fringilla metus, sit amet pellentesque justo. Donec feugiat elit in laoreet sagittis. Duis eget metus tellus. Suspendisse sollicitudin commodo dolor consequat efficitur. Nulla molestie leo at velit sagittis, vitae dictum eros gravida. Sed fringilla egestas ipsum, nec vulputate metus ornare in. Aenean et magna quis ante sodales posuere a pharetra purus. Sed malesuada nulla vitae eros lobortis, quis molestie lacus aliquam. Suspendisse eget arcu eu ex sollicitudin tempor ut eu ante. Aliquam mollis velit non elementum malesuada. Curabitur vehicula eu tellus sed tincidunt. Donec consequat neque id sapien venenatis, eget accumsan enim lacinia.</p>
    <p>Nunc pellentesque nibh vitae quam aliquam pulvinar. Curabitur viverra odio quis purus commodo, in consequat nisi interdum. Morbi bibendum metus a mauris mattis, et laoreet erat eleifend. Morbi venenatis dapibus lorem, vitae egestas odio varius ac. Praesent id scelerisque ligula. Nullam dictum, metus sed fringilla sagittis, lacus magna bibendum metus, eget maximus ligula purus ac lectus. Vestibulum auctor sodales odio, ac gravida mauris pharetra quis. Etiam tincidunt pharetra lectus, ornare tempor augue ultricies in. Nulla tincidunt tempor eros. Aliquam ornare lorem dui, non pharetra orci elementum vitae. Nunc viverra consectetur orci, id dictum quam sodales a. Nullam vulputate orci nec luctus scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In at facilisis augue. Aenean ullamcorper ex a enim lacinia suscipit.</p>
    <p>Phasellus condimentum risus ut rutrum dapibus. Phasellus nec porta orci. Pellentesque laoreet odio at elementum tincidunt. Sed venenatis dui libero, quis fermentum nibh euismod quis. Proin sit amet tellus lorem. Ut egestas enim nec est sollicitudin pellentesque. Donec consequat luctus mi at mattis. Praesent pharetra mattis dolor non aliquam.</p>
    <p>Phasellus libero eros, venenatis quis rutrum posuere, feugiat ac tellus. Phasellus et dolor nibh. Proin in erat mauris. Sed dictum mi sit amet tellus iaculis vulputate ut quis ex. Integer facilisis sed ante a euismod. Pellentesque sem felis, venenatis sit amet est id, cursus facilisis felis. Morbi commodo risus lectus, ac scelerisque velit iaculis ac. Nunc dignissim est nec lorem maximus, sit amet consectetur leo efficitur. Morbi sit amet diam augue. Ut nec magna a sapien dictum dapibus. </p>
</div>

如果您无法声明高度，那么...您可以通过包含不带position:fixed; 但在您的内容上方和下方（分别）带有visibility:none; 的页眉和页脚的精确副本来伪造它。请注意，根据如何你这样做，为什么大小是不可声明的，以及什么你的页眉/页脚包含，这可能或可能不可行。

一种不那么老套的方法是根据页眉/页脚的显示大小使用 js 添加边距。我实际上建议这样做，只要目标浏览器可以支持它。

如果您希望页脚仅在内容超出底部时才与底部结合，则必须使用 js 检测窗口大小并将页脚/页眉默认为relative。如果窗口溢出，切换到fixed。