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>

它应该是按下页脚。

不，不应该因为你定位元素绝对，这会使他们脱离正常流程，所以你必须手动position。

浮动和清算不起作用，因此无需使用。

绝对侧边栏或固定页脚

1 个答案: