2

I am facing two issues.

First issue is that my background gradient is not taking up the entire length of the page. Instead it is repeating.

Second issue is that my aside element is not taking up the entire height of the page.

HTML and CSS can be viewed in jsfiddle: 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%;
}

Thanks in advance.

Chris Smith
  • 399
  • 3
  • 16

3 Answers3

4

Your body's height isn't the full height of the page. This can be corrected with these css lines;

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

That should fix the background not covering all the way down.

For the aside, making it absolute positioned, with top and bottom at 0 will stretch it all the way.

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

Here's the fiddle https://jsfiddle.net/mcsjz4j1/21/

gedc
  • 81
  • 3
1

Give min-height:100% for your aside css.

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

For other issue, check this

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

Community
  • 1
  • 1
Priya Payyavula
  • 387
  • 4
  • 12
0

Try this:

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;
}
SRK
  • 1
  • 2