Question

我使用此代码使用JSTL打印表。该表位于contentFrame div中。但是，最初位于底部的页脚开始浮动并与contentFrame重叠。我不想让页脚保持固定位置。有没有办法将它保持在页面的底部，这样当添加新内容时，它就会被推送到＃34;下来？

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：使用bootstrap中的粘性页脚，它可以正常工作

Answer 1

解决此问题的一种方法是：

授予#footerFrame默认position: absolute
使用.js监控浏览器视口的高度和#contentframe的高度
如果#contentframe高度超过剩余的视口高度，请将#footerFrame更改为position: relative

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该使用<div style="clear:both;"></div>以这种方式在页脚之前清除浮动：

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

但无需定位footerFrame absolute：

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

和了解更多关于FLOATS的信息检查一下： https://css-tricks.com/all-about-floats/

Answer 3

你的内容有多大？

如果你删除了＆＃39;的位置：绝对;＆＃39;或者＆＃39;底部：0px;＆＃39;从#footerFrame css开始，页脚将向上移动以在页面内容下定位。

如果您的内容不足以填满窗口，则可能不需要这样做。

如果您搜索它们，那么已经有很多页脚解决方案，它们将向您展示可以实现适合您的页脚解决方案的多种方式。

Answer 4

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

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

注意：我只使用[attribute]选择器来提高创建演示的速度！在实际的生产代码中使用类 - 它是什么类，并且没有＆＃ 39;在未来的某个时刻冒着被一些闪亮的新功能轰炸的风险！

http://dabblet.com/gist/a633128f55dbcc160ecc

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

如果您希望页脚仅在内容过去时与底层结合，则您必须使用js来检测窗口大小并将页脚/标题默认为relative。如果窗口溢出，请切换到fixed。

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

4 个答案: