Tell me where is the error?

@import url('https://fonts.googleapis.com/css?family=Roboto'); body { font-family: Roboto, Arial, sans-serif; padding: 0; margin: 0; height: 100%; background: linear-gradient(45deg, #abdcff, #0396ff) no-repeat; } .stylemenu { margin-left: 150px; margin-right: 150px; overflow: hidden; } /* При наведении меняет цвет в меню*/ .stylemenu a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; position: relative; left: 73px; line-height: 1.5; } /* меню при наведении меняет цвет*/ .two, .five, .eight, .eleven { background: rgba(0, 228, 246, .4); } .framemenu:hover { background: rgba(176, 176, 176, 0.67); } .logo { text-decoration: none; font-size: 23px; position: absolute; top: 10px; left: 7px; filter: drop-shadow(3px 4px 5px black); color: #723232; margin-left: 153px; } .classmenu { background: #edf6ff; padding: 20px; border: 2px solid #ff761a; margin: 10px; position: relative; } b.ckgroundfon { position: absolute; }

    2 answers 2

    To make the body occupy the entire height of the screen, specify the following property for it:

     height: 100vh;

    or

     min-height 100vh; 

     @import url('https://fonts.googleapis.com/css?family=Roboto'); body { font-family: Roboto, Arial, sans-serif; padding: 0; margin: 0; height: 100vh; background: linear-gradient(45deg, #abdcff, #0396ff) no-repeat; } .stylemenu { margin-left: 150px; margin-right: 150px; overflow: hidden; } /* При наведении меняет цвет в меню*/ .stylemenu a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; position: relative; left: 73px; line-height: 1.5; } /* меню при наведении меняет цвет*/ .two, .five, .eight, .eleven { background: rgba(0, 228, 246, .4); } .framemenu:hover { background: rgba(176, 176, 176, 0.67); } .logo { text-decoration: none; font-size: 23px; position: absolute; top: 10px; left: 7px; filter: drop-shadow(3px 4px 5px black); color: #723232; margin-left: 153px; } .classmenu { background: #edf6ff; padding: 20px; border: 2px solid #ff761a; margin: 10px; position: relative; } b.ckgroundfon { position: absolute; }

    • @Artem , if you still need support of ancient browsers caniuse.com/#feat=viewport-units use in conjunction with JS. Here's an example on jQuery $('body').css('height', $( window ).height()); - Bert

     body { margin: 0; padding: 0; height: 100vh; background: linear-gradient(45deg, #abdcff, #0396ff) no-repeat; }