如果在css

Question

原因如下：

.technology {
  width: 100%;
}

.technology-left {
  width: 15%;
  height: 100%;
  padding-bottom: 8000px;
  margin-bottom: -8000px;
  overflow: hidden;
}

.technology-right {
  width: 85%;
}

<div class="technology">
  <div class="technology-left">
    VERY LONG ACCORDION MENU
  </div>

  <div class="technology-right">
    <div class="content">
      CONTENT
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>
</div>

现在，如果班级内容中没有内容或内容非常少，或者手风琴中的任何主链接都有相当多的子链接，并且当它打开时，则页脚会显示页脚下方的空白区域。

如何通过将页脚保持在基础而不是固定来解决这个问题？

还有一个小东西（虽然在标题中没有提到），当我在Safari中看到技术左侧的东西只是向下滚动时，我认为它不需要-8000px或溢出？

以下是问题的说明： Screen Shot

Answer 1

我认为最简单的解决方案是使用flex。并且为了在底部制作页脚，只需使用class Post extends Component { componentDidMount() { const postId = this.props.match.params.postId; // fetch data based on postId } render() { return ( <div> ... </div> ); } } 。

＆＃13;

＆＃13;

margin-top:auto

＆＃13;

* {
 box-sizing:border-box;
}
body {
  height: 100vh;
  margin: 0;
}

.technology {
  display: flex;
  height: 100%;
}

.technology-left {
  width: 15%;
  height: 100%;
  border: 1px solid;
}

.technology-right {
  flex: 1;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}

.footer {
  margin-top: auto;
  border: 1px solid red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

对于您的布局，我使用flexbox *：

＆＃13;

＆＃13;

body {
  margin: 0;
}

.technology {
  width: 100%;
  display: flex;
  min-height: 100vh;
}

.technology>div {
  display: flex;
  flex-direction: column;
}

.technology-left {
  background-color: #f3f3f3;
  flex: 0 0 15%;
}

.technology>div, .technology-right>div {
  padding: .5rem;
}

.technology .technology-right {
  flex: 1 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer {
  padding: .5rem;
  background-color: #424242;
  color: white;
}

＆＃13;

<div class="technology">
  <div class="technology-left">
    VERY LONG ACCORDION MENU
  </div>

  <div class="technology-right">
    <div class="content">
      CONTENT
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

*别忘了prefix。

Answer 3

据我所知，你想要实现全高度布局，其中页脚总是停留在底部，而左边部分应该在溢出时可滚动。我觉得不需要那么长的边距和填充，你可以没有它的布局。这里我更新了你的代码

.technology {
  width: 100%;
}

.technology-left {
  width: 15%;
  height: 100vh;
  overflow: auto;
  float:left;
  background: #eee;
}

.technology-right {
  width: 85%;
  float:left;
  height:100vh;
}
.footer{
  height:50px;
  background: #ddd;
}
.content {
  height:calc(100vh - 50px);
}

<div class="technology">
  <div class="technology-left">
    VERY LONG ACCORDION MENU
  </div>

  <div class="technology-right">
    <div class="content">
      CONTENT
    </div>
    <div class="footer">
      FOOTER
    </div>
  </div>
</div>

这样你的页脚总是停留在底部，而技术左边在溢出时可以滚动。