html - 绝对侧边栏或固定页脚

Question

通过这种编码，我的侧边栏与页脚重叠并隐藏了它的文本。它应该将页脚向下推。我曾尝试删除侧边栏 css 上的绝对位置，但无济于事。清除页脚上的两者都不起作用。有人知道为什么吗？

/* -------------------------------- 

Sidebar

-------------------------------- */
.cd-side-nav {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 45px 0 0;
  background-color: #2c3136;
  visibility: hidden;
  opacity: 0;
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}


@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: absolute;
    float: left;
    top: auto;
    width: 110px;
    max-height: 100vh;
    padding-top: 55px;
    /* reset style */
    visibility: visible;
    opacity: 1;
    overflow: visible;
    

  }
  
  
  .footer{
  bottom:0; 
  width: 100%; 
  background-color: gray;
  height: 200px;
  position: fixed;
}

<main class="cd-main-content">
		<nav class="cd-side-nav">
    
    </nav>
    
</main>


<div class="footer">FOOTER</div>

Answer 1

你可以这样做:

* {margin: 0; padding: 0; box-sizing: border-box} /* added */

.cd-main-content {
  position: relative; /* added */
}

.cd-side-nav {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  padding: 45px 0 0;
  background-color: #2c3136;
  visibility: hidden;
  opacity: 0;
  height: 100vh; /* modified */
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}

@media (min-width: 768px) {
  .cd-side-nav {
    position: absolute;
    /*float: left; not necessary */
    top: 0; /* modified */
    left: 0; /* added */
    width: 110px;
    height: calc(100vh - 200px); /* modified / - 200px of the .footer's height / should use the height property for both */
    padding-top: 55px;
    /* reset style */
    visibility: visible;
    opacity: 1;
    overflow: visible;
  }
  .footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: gray;
    height: 200px;
    position: fixed;
  }
}

<main class="cd-main-content">
  <nav class="cd-side-nav"></nav>
</main>
<div class="footer">FOOTER</div>

It should be pushing the footer down.

不，不应该，因为您绝对定位元素，这会使它们脱离正常流程，因此您必须手动定位它们。

float 和清除没有效果，因此是不必要的。