主页 / 问题 / 637285
Accepted
Slava Podolskiy
Asked:2020-03-09 20:25:02 +0000 UTC2020-03-09 20:25:02 +0000 UTC

将页脚粘贴到两列布局的屏幕底部

  • 772

看了很多关于这个话题的SO问题，但是没有找到我的情况。有一个页面的内容不适合一页。只要内容少，就OK。随着大量内容的蔓延footer，它仍然留在原来的地方：

内容少

很多内容

.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    min-height: 20px;
    background-color: #505050;
}

如何为“长”页面制作页脚？

css

5 个回答

  1. 您仍然可以通过检查来执行此操作（如果内容很少，则修复它，否则它是静态的）。

    很多内容：

    if( $(document).height() <= $(window).height() ){		
  $(".page-footer").addClass("fixed-bottom");
}
    .page-footer {
  padding: 1rem;
  background: #333;
  color: #fff;
  text-align: center;
}

.page-footer.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum accusamus cum voluptas voluptate esse asperiores cupiditate velit quaerat optio, praesentium ipsa, deserunt veniam facilis libero accusantium! Similique accusamus assumenda beatae amet harum delectus quisquam minima quidem id veniam a eaque iste labore distinctio quia cupiditate, ullam suscipit. Repellendus, porro, officiis!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque officia, hic iure placeat, dolores amet eaque quae, eveniet laboriosam voluptatibus fugit velit aut. Facilis expedita, id quasi asperiores molestiae, numquam provident consectetur maxime ad dolorem illo, voluptas dolore accusantium quam deleniti enim ratione doloremque cum omnis ea maiores, deserunt earum eveniet minima eaque. Soluta earum amet esse rem vitae eaque enim aut obcaecati laudantium provident eius delectus nulla doloremque omnis quisquam, ut eos modi, autem tenetur! Deserunt pariatur cum aspernatur aperiam, obcaecati libero, tenetur veritatis aut praesentium architecto optio perspiciatis quo ut. Atque, soluta doloribus recusandae quibusdam ipsam qui!
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, unde.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus perspiciatis molestiae nemo soluta nesciunt alias porro impedit, perferendis molestias possimus mollitia asperiores laboriosam consectetur enim odit, animi facere earum consequatur in veniam neque quae esse. Beatae iure laboriosam optio? Pariatur.
  </p>
</main>
  
  <footer class="page-footer">
    FOOTER
  </footer>

    小内容：

    if( $(document).height() <= $(window).height() ){		
  $(".page-footer").addClass("fixed-bottom");
}
    .page-footer {
  padding: 1rem;
  background: #333;
  color: #fff;
  text-align: center;
}

.page-footer.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
      
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
<main>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, harum. Sapiente dignissimos in provident fugit voluptatem commodi, ipsa blanditiis assumenda quasi amet excepturi nostrum voluptatum molestiae ratione, corrupti hic voluptatibus.
  </p>
</main>
  
  <footer class="page-footer">
    FOOTER
  </footer>

    • 4

  2. 另一种选择是使用flexbox。

    .Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  
  background: red;
}

.Site-content {
  flex: 1;
}

/* Просто для демо */
header {
  background: blue;
}

footer {
  background: pink;
}

* {
  color: #fff;
  margin: 0;
  padding: 0;
}
    <body class="Site">
  <header>Header</header>
  <main class="Site-content">Content</main>
  <footer>Footer</footer>
</body>

    • 2
  3. Best Answer

    1.固定页脚高度的绝对定位解决方案

    html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

main {
   /* Выставляем отступ с высотой footer */
  padding-bottom: 30px;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer */
  height: 30px;
}
    <body>
  <header>
   header
  </header>
  <main>
   content
  </main>
  <footer>
   footer
  </footer>
</body>

    2. 响应式页脚高度的 Flexbox 解决方案

    body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  /* Чтобы занимал оставшееся пространство */
  flex-grow: 1;
}

footer {
  /* Чтобы footer не уменьшался */
  flex-shrink: 0;
}
    <header>
  header
</header>
<main>
  content
</main>
<footer>
  footer
</footer>

    3.通过表格解决自适应页脚高度

    body {
  display: table;
  min-height: 100vh;
}

main {
  display: table-row;
  /* Чтобы ряд занимал всё оставшееся пространство, так как табличная разметка не позволит ему вытолкнуть header и footer */
  height: 100%;
}
    <header>
  header
</header>
<main>
  content
</main>
<footer>
  footer
</footer>

    4. 使用 jQuery 实现响应式页脚高度的解决方案

    // Высчитываем высоту footer и делаем соответствующий отступ от main:
function footer(){
$('main').css('padding-bottom',$('footer').height());
}
window.addEventListener('load',footer);
window.addEventListener('resize',footer);
    html {
  /* Растягиваем документ на всю высоту окна */
  height: 100%;
}

body {
  position: relative;
  /* Растягиваем body по высоте html */
  min-height: 100%;
}

main {
   /* Выставляем отступ с высотой footer по умолчанию */
  padding-bottom: 30px;
}

footer {
  /* Позиционируем footer внизу main */
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Высота footer по умолчанию */
  height: 30px;
}
    <html>
<head>
 <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
</head>
<body>
  <header>
   header
  </header>
  <main>
   main
  </main>
  <footer>
   footer
  </footer>
</body>
</html>

    • 1

  4. 您的问题表述不正确，这就是为什么所有答案都不正确的原因。问题不在页脚，而在内容。主块需要设置整个屏幕的高度，设置overflow: auto并从中减去页脚的高度。

    因此，只有主块会有滚动区域，它不会爬到页脚上。

    它看起来像这样：

    html {
/* Растягиваем документ на всю высоту окна */
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}

body {
position: relative;
/* Растягиваем body по высоте html */
min-height: 100%;
}

aside {
float: left;
background: skyblue;
height: 100%;
width: 300px;
overflow: auto;
}

main {
overflow: hidden;
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
}

article {
overflow: auto;
height: 100%;
background: green;
}

footer {
background: #ddd;
/* Позиционируем footer внизу main */
position: absolute;
bottom: 0;
width: 100%;
/* Высота footer */
height: 20px;
}
    <body>
  <main>
    <aside>
        sidebar
    </aside>
    <article>
        Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:Ваш вопрос неверно сформулирован, из-за чего и все ответы неверные. Проблема не в футере, а в контенте. Основному блоку нужно задать высоту всего экрана, поставить overflow: auto и отнять от него высоту футера.

Таким образом, область прокрутки будет только у основного блока и залазить на футер он не будет.

Выглядеть это будет так:
    </article>
  </main>
  <footer>
   footer
  </footer>
</body>

    • -1

  5. 有这样一个网站CSS Sticky Footer。

    如果您使用他们的 CSS 和 HTML，页脚将始终位于底部，并且此解决方案适用于自 IE8 以来的大量浏览器。

    这是一个代码片段，如果您稍微调整一下您的布局，一切都会正常进行。

    /*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
	padding-bottom: 180px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -180px; /* negative value of footer height */
	height: 180px;
	clear:both;} 

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/
    <div id="wrap">

	<div id="main">

	</div>

</div>

<div id="footer">

</div>

    • -2

相关问题