Question

我将div定位到底部中心时出现问题。这就是我的页面的样子：

.fill{
    height:auto;
    min-height:100%;
    }

.container {
    min-height:80rem;
    height:auto;
    background: #c9c8c8;
    }

.parent{
    position:fixed;
    bottom:0px;
    width:100%; 
}

.child{
    width:100px; 
    margin:0px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="fill">
    <div class="container">
      <div class="parent">
        <div class="child">This is footer</div>
      </div>
    </div>
  </div>
</body>

但每当我滚动页面时，div都会停留在屏幕的底部，而不是页面。

每当我尝试其他任何内容时，在整页上没有内容的页面上，div只会停留在最后一篇文章之下（通常位于中间页面）。

我真的很感谢你的帮助。非常感谢你！

Answer 1

3种类型的页脚

如果您想要一个居中的页脚，只是在您提供的内容下方挂起，那么这是大多数浏览器布局引擎的默认行为。页脚代码非常简单，只需像你已经完成的那样给它height，width和margin: 0 auto;。

footer {
  background-color: #b8ffc9;
  height: 100px;  
  width: 200px;
  text-align: center;
  margin: 0px auto;
}

如果您想要一个居中的页脚留在视口的底部，那就是position: fixed bottom: 0 - 但您已经在代码中获得了该布局，我假设你知道怎么做那个;）

footer {
  background-color: #b8ffc9;
  height: 100px;  
  width: 200px;
  text-align: center;
  margin: 0px auto;
  position: fixed:
  bottom: 0;
}

如果您希望基于页面内容高度的居中页脚位于视口底部，则必须计算内容和页脚高度，从视口中减去该页脚并进行调整页脚的margin-top动态地使用JS（我还在条件检查中添加了以确保在此示例中我们没有将负上边距应用于footer）。

// 1- Calculate height of window
var windowHeight = window.innerHeight;

// 2- Get height of container and footer
var contHeight = $(".container").height();
var footerHeight = $("footer").height();

// 3- Add height of container and footer, subtract from visible window height. This will be the new margin-top
var footerTopMargin = windowHeight - (contHeight + footerHeight);

// 4- Check to make sure footerTopMargin isn't 0 
if (footerTopMargin <= 10) {
  footerTopMargin = 10;
}

// 5- Apply caluclated footerTopMargin to footer
$("footer").css("margin-top", footerTopMargin);

工作代码集示例： http://codepen.io/staypuftman/pen/kXOqxx

Answer 2

如果您正在考虑.container作为＆＃34; Page＆＃34;并且您希望将此div 分类作为footer粘贴到其底部，然后只需使用position:absolute;和bottom:0px;作为页脚。

另外请记住将父元素的位置.container设置为relative，因为position:absolute;仅在元素具有非static时才会被激活 - ally 位置祖先。

还有一件事要记住，这个＆＃34;页脚＆＃34;将重叠父元素的内容。您可以通过实施padding来解决此问题。

<强> DEMO

Answer 3

在下面的代码段中，页脚持久保存在视口的底部，其余部分垂直滚动。页脚已与所有内容分开，并且是<body>的子项以及<main>和<header>元素的兄弟。所以<body>的第一级是：

</header>
</main>
</footer>

第一级确定您希望布局占用多少页面。好好集中在<main>分支。第二级确定内容的显示方式。通常，此级别将具有包含overflow属性的包装器/容器，用于滚动超出视口边缘的内容。第二级由<article>和<hgroup>占用。

</hgroup>
</article>

第3级和随后的级别是内容。有一个标记为： content 的按钮，用于切换<section>元素的存在。这演示了布局如何包含和不包含内容。请注意，如果您使用position，您很可能最终会将大部分元素position编辑出来。它比relative更容易使用absolute，相信我。如果您需要了解position值的差异，请参阅此简短article。

段

＆＃13;

$('button').on('click', function() {
  $('.child').fadeToggle();
});

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1.428 Verdana;
  background: #444;
  color: #ede;
  position: relative;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
}
.main {
  height: 100vh;
  width: 100vw;
  background: #c9c8c8;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  padding: 0 1.5em;
}
.article {
  min-height: 100vh;
  margin: 0 auto 15%;
  position: relative;
  width: 100%;
  padding: 1em;
  background: #e00;
}
.child {
  position: relative;
  width: 100%;
  margin: 0px auto 1.25em;
  padding: 2em;
}
section:last-of-type {
  margin-bottom: 3em;
}
.sec1 {
  background: yellow;
  color: black;
}
.sec2 {
  background: black;
  color: yellow;
}
.titles {
  line-height: 2;
  padding: 0 1em 2em;
}
.titles * {
  margin-bottom: 5px;
}
h1,
h2,
h3,
h4 {
  font-variant: small-caps;
  font-family: Tahoma;
}
h1 {
  font-size: 2rem;
}
.head h1 {
  display: inline-block;
  color: white;
  position: relative;
  top: calc(50% - 1rem);
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
p {
  font-size: 1.1rem;
}
.nav {
  position: relative;
  display: table;
  width: 80%;
}
a,
a:link:link,
a:visited:visited {
  margin: 0 1em;
  padding: 1em 0;
  display: table-cell;
  color: white;
  font-size: 1.4rem;
}
a:hover:hover,
a:active:active {
  color: yellow;
}
.head {
  font-size: 1.25rem;
  position: relative;
  width: 100%;
  border-bottom: 3px ridge grey;
  padding: 1em 2em 0;
  margin: 0 auto 1.25em;
  background: green;
}
.foot {
  display: table;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-top: 3px ridge grey;
  padding: 1em 2em;
  margin: 1.25em auto 0;
  height: 2.5em;
  min-height: 15%;
  background: blue;
  color: white;
}
.btn.btn {
  background: orange;
}
.btn.btn:active {
  color: black;
  background:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <header class='head'>
    <h1>Site Title</h1>
    <nav class='nav'>
      <a href='#/'>Link</a><a href='#/'>Link</a><a href='#/'>Link</a>
    </nav>
  </header>
  <main class="main">
    <hrgroup class='titles'>
      <h2>Article Title</h2>
      <h3>Byline</h3>
    </hrgroup>
    <article class='article'>
      <section class='child sec1'>
        <h3>Top Section 1</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <h4>End Section 1</h4>
      </section>
      <section class='child sec2'>
        <h3>Top Section 2</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <h4>End Section 2</h4>
      </section>
    </article>
  </main>
  <footer class="foot">
    <h3 style='display:table-cell'>Footer</h3>
    <button class='btn'>Content</button>
  </footer>


</body>

＆＃13;

无论页面高度如何，我如何居中对齐div？

3 个答案:

段