Question

这个想法是让横幅和导航栏粘在浏览器窗口的顶部，我不想滚动，下面的内容可以滚动。即使内容不是很大，我也希望内容左右两个部分具有相同的高度。

@charset "utf-8";
 body {
  margin: 0px;
  padding: 0px;
}
.banner {
  width: 100%;
  height: 125px;
  background-color: #034569;
  position: relative;
  top: 0px;
}
.nav {
  width: 100%;
  height: 50px;
  background-color: #235B79;
}
.contentwrapper {
  width: 100%;
  background-color: #aaaaaa;
  position: fixed;
  top: 175px;
  overflow-y: scroll;
}
#contentleft {
  width: 25%;
  height: auto;
  background-color: #034569;
  float: left;
}
#contentright {
  width: 75%;
  height: auto;
  background-color: #ffffff;
  float: right;
}

Answer 1

对于您的CSS，您需要横幅和导航栏以获得position:fixed属性，这将阻止滚动。如果.contentwrapper声明了静态高度，我们可以使内部的div元素用height:100%;填充高度。我们也可以为html和body分配一个高度：html, body: height:100%;。

@charset "utf-8";
 body, html {
  margin: 0px;
  padding: 0px;
  height:100%;
}
.banner {
  width: 100%;
  height: 125px;
  background-color: #034569;
  position: fixed;
  top: 0px;
}
.nav {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 125px;
  background-color: #235B79;
}
.contentwrapper {
  width: 100%;
  background-color: #aaaaaa;
  padding-top: 175px;
  height:300px;
  overflow-y: scroll;
}
#contentleft {
  width: 25%;
  height: 100%;
  background-color: #034569;
  float: left;
}
#contentright {
  width: 75%;
  height: 100%;
  background-color: #ffffff;
  float: right;
}

滚动问题滚动无效

1 个答案: