Question

我面临两个问题。

第一个问题是我的背景渐变没有占据页面的整个长度。相反，它正在重复。

第二个问题是我的旁边元素没有占据页面的整个高度。

可以在jsfiddle中查看HTML和CSS：https://jsfiddle.net/mcsjz4j1/

.aside {
width: 20%;
float: left;
color: black;
background-color: #f7f7f7;
height: 100%;
}

.list {
width: 80%;
float: right;
color: white;
height: 100%;
}

提前致谢。

Answer 1

您身体的高度不是页面的完整高度。这可以通过这些css行来纠正;

html{
  min-height: 100%;
  position:relative;
}
body {
  height: 100%;
  width: 100%;
}

这应该可以解决背景不能完全覆盖的问题。

除此之外，将其置于绝对位置，顶部和底部均为0，将一直拉伸。

.aside {
  width: 20%;
  /*margin-top: 4%;*/
  color: black;
  background-color: #f7f7f7;
  height: 100%;
  position:absolute;
  top:0;
  bottom:0;
}

这是小提琴https://jsfiddle.net/mcsjz4j1/21/

Answer 2

为你的css提供最小高度：100％。

.aside {
  width: 20%;
  /*margin-top: 4%;*/
  float: left;
  color: black;
  background-color: #f7f7f7;
  min-height: 100%;
}

有关其他问题，请查看

CSS3 gradient background set on body doesn't stretch but instead repeats?

Answer 3

试试这个：

body {
  /*height: 100%;*/
  width: 100%;
}

body {
background: rgba(117,137,12,1);
background: -moz-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(117,137,12,1)), color-stop(100%, rgba(164,179,87,1)));
background: -webkit-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%);
background: -o-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%);
background: -ms-linear-gradient(top, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%);
background: linear-gradient(to bottom, rgba(117,137,12,1) 0%, rgba(164,179,87,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75890c', endColorstr='#a4b357', GradientType=0 );
background-repeat: no-repeat;
}

背景渐变不占整页长度，而是重复

3 个答案: