Question

我喜欢在没有javascript的情况下设计网站布局。只需使用CSS（如果没有必要的javascript）

ex）我喜欢使用CSS3动画而不是jQuery动画。

这是我的问题。

我想将元素<footer>附加到<aside>的底部
此外，如果内容比下面的代码更高，页脚应该下降。

＆＃13;

var section = document.querySelector('aside section');
document.querySelector('button').onclick = function() {
  section.innerHTML += '<br/>Hi'
};

＆＃13;

html, body { height: 100%; margin: 0; color: #fff; font-size: 16pt; }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  
  background: #333;
}

main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 200px;
  bottom: 0;
  
  background: #833;
}

aside {
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  bottom: 0;
  overflow: auto;
  
  background: #383;
}

.wrap {
  position: relative;
  min-height: 100%;
  padding: 0 0 100px 0;
  box-sizing: border-box;
}

aside section {
  color: white;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  
  background: #338;
}

＆＃13;

<header>
  Header
</header>
<main>
  Main<br>
  <button>Add Content to Aside</button>
</main>
<aside>
  <div class="wrap">
    <section>
      Aside Section
    </section>

    <footer>
      Footer
    </footer>
  </div>
</aside>

＆＃13;

我认为这不错。但是，当页脚具有固定高度时，此代码可以正常工作但是，我试图制作的页脚并没有固定的高度。

我该怎么做？

我想将<footer>附加到<aside>的底部但是如果<footer>的内容很大（高度很大），<aside>应该隐藏（滚动后可以看到）。

如下（但我想没有JS）：

＆＃13;

var section = document.querySelector('aside section');
var footer = document.querySelector('aside footer');
document.querySelector('button').onclick = function() {
  section.innerHTML += '<br/>Hi'
};

section.style.paddingBottom = footer.offsetHeight + "px";

＆＃13;

html, body { height: 100%; margin: 0; color: #fff; font-size: 16pt; }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  
  background: #333;
}

main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 200px;
  bottom: 0;
  
  background: #833;
}

aside {
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  bottom: 0;
  overflow: auto;
  
  background: #383;
}

.wrap {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
}

aside section {
  color: white;
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: #338;
}

＆＃13;

<header>
  Header
</header>
<main>
  Main<br>
  <button>Add Content to Aside</button>
</main>
<aside>
  <div class="wrap">
    <section>
      1<br>
      2<br>
      3<br>
      4<br>
      5<br>
      6<br>
      7<br>
      8<br>
      9<br>
      10<br>
      11<br>
      12<br>
      13<br>
      14<br>
      16<br>
      17<br>
      18<br>
      19<br>
      20 will Not shown without JS
    </section>

    <footer>
      Not fixed height Footer
    </footer>
  </div>
</aside>

＆＃13;

Answer 1

您可以使用display属性创建此功能，方法是将parent的显示设置为display：table和要显示的页脚：高度为1％的table-row。

html, body { height: 100%; margin: 0; color: #fff; font-size: 16pt; }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;

  background: #333;
}

main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 200px;
  bottom: 0;
  height: auto;

  background: #833;
}

aside {
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  bottom: 0;
  overflow: auto;
  height: auto;

  background: #383;
}

.wrap {
  position: relative;
  height: auto;
  box-sizing: border-box;
  min-height: 100%;
  display: table;
}

aside section {
  color: white;
  height: auto;
}

footer {
  background: #338;

  position: relative;
  display: table-row;
  height: 1%;
}

这是一个演示： My Codepen Demo

希望它有帮助！干杯！

Answer 2

您可以在页脚上使用带有自动上边距的flex display将其强制到容器的底部。确保容器至少与屏幕一样高（正如您已经在做的那样），因此将确保页脚位于屏幕的底部。

以下是基本款式：

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
footer {
  margin-top: auto;
}

html, body { height: 100%; margin: 0; color: #fff; font-size: 16pt; }

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #333;
}
main {
  position: absolute;
  top: 50px;
  left: 0;
  right: 200px;
  bottom: 0;
  background: #833;
}
aside {
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  bottom: 0;
  overflow: auto;
  background: #383;
}
.wrap {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
}
aside section {
  color: white;
}
footer {
  margin-top: auto;
  background: #338;
}

<header>
  Header
</header>
<main>
  Main<br>
  <button>Add Content to Aside</button>
</main>
<aside>
  <div class="wrap">
    <section>
      1<br>
      2<br>
      3<br>
      4<br>
      5<br>
      6<br>
      7<br>
      8<br>
      9<br>
      10<br>
      11<br>
      12<br>
      13<br>
      14<br>
      16<br>
      17<br>
      18<br>
      19<br>
      20 will Not shown without JS
    </section>
    <footer>
      Not fixed height Footer
    </footer>
  </div>
</aside>

如何将元素附加到底部

2 个答案: