Question

我试图设计一个带有标题，两列和一个页脚的页面。我不希望页面显示滚动条，但如果数据溢出则允许列滚动。

目前我最好的尝试是：

HTML

<body>
  <div>
    <h1>Title goes here</h1>
  </div>
  <div class="content">
    <div class="side-text">
      <p>Menu Items</p>
      <p>Menu Items</p>
      <p>Menu Items</p>
      <p>Menu Items</p>
    </div>
    <div class="main-text">
      <p>...Snip...</p>
    </div>
  </div>
  <footer>
    <p>...snip...</p>
  </footer>
</body>

CSS

* {
    box-sizing: border-box;
    margin: 0;
}

html, body, .content {
    height: 100%;
    overflow: hidden;
}

.content > div {
    float: left;
    height: 100%;
    overflow: auto;
}

.side-text {
    width: 15%;
}

.main-text {
    width: 85%;
}

footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

但右侧div中的内容流过页脚（甚至超过<body>的末尾）。

以上代码的JSFiddle：https://jsfiddle.net/gcd7d238/

Answer 1

为防止它越过页脚，您只需更改内容高度：

.content > div {
    float: left;
    height: 90%;
    overflow: auto;
}

小提琴：https://jsfiddle.net/gcd7d238/2/

<强>更新

为了提高响应速度，您可以使用display:table：

body{
  display: table;
}
.content {
  display: table-row;
  height: 95%;
}
footer {
    display: table-row;
    width: 100%;
}

https://jsfiddle.net/gcd7d238/3/

防止浮动DIV重叠页脚

1 个答案: