CSS Цвет фона не заполнен, он не покрывает всю страницу правильно

Я пытаюсь добавить цвет фона на свою страницу, но он не охватывает всю страницу правильно.CSS Цвет фона не заполнен, он не покрывает всю страницу правильно

Скриншот 1: As it can be seen here, there are white space on the background after the cards

CSS КОД

#background 
{ 
    background-color:#9B59B6; 
    margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/ 
    width: 100%; 
}

Если добавить:

position:absolute; 
height:100%; 
width:100%;

Было бы решить эту проблему, однако, это может вызвать другую проблему так:

Снимок экрана 2: Here, when I added more cards, and scroll it down, there is a white space below the background

CSS КОД для скриншота 2

#background 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    background-color:#9B59B6; 
    margin: -19px 0 0 0; 
    width: 100%; 
}

Как решить эту проблему? Я пробовал использовать position:relative или overflow:hidden, но это не помогает.

Я делаю это на ASP.net MVC 6, поэтому формат - cshtml вместо html.

Пожалуйста, помогите, спасибо!

источник

2016-05-30 Jason Christopher

Используйте viewheight и viewwidth.

html, body, #background { min-height: 100vh; min-width: 100vw; background-color:#9B59B6;}

источник

2016-05-30 13:57:49

Это работает, Большое вам спасибо! –

Ваше тело не настроено на 100% высоты. Думаю.

html, body { 
    height: 100%; 
}

, а затем

#background { 
    height: 100%; 
}

Но почему бы не установить цвет фона свойство непосредственно к телу?

источник

2016-05-30 11:25:56 AlexisWbr

Цвет тела

body{ 
    background-color:black; 
    }

источник

2016-05-30 11:26:14

Я пробовал, но это точно так же, как на скриншоте 1, он не охватывает всю страницу. Он распространяется только на последние карты. Я делаю это на cshtml ASP.net, поэтому я не могу использовать свойство body. –

Вы должны убедиться, что покрытие всего имущества тело

body 
 
{ 
 
    background-color:#9B59B6; 
 
    margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/ 
 
    width: 100%; 
 
}

<html> 
 
    
 
    <body > 
 
    </body> 
 
    </html>

Проблема может произойти потому, что вы реализуете id определенного DIV (например, #background). обязательно используйте body.

источник

2016-05-30 11:27:22 AVI

Привет, JokerFan, я делаю это не на HTML5. Я делаю это на ASP.net, поэтому формат немного отличается, он использует div вместо тела. Я немного отредактирую вопрос. Спасибо за вход! –

body{background-color:#9B59B6;}

Это должно сработать. Но каков элемент html, для которого установлен ID #background?

Я думаю, что это проблема.

источник

2016-05-30 11:28:55

Вы должны правильно использовать body { background: #9B59B6 } или хорошо нужно сделать ваш #background фиксированной вместо absolute

#background 
{ 
    position:fixed; 
    height:100%; 
    width:100%; 
    background-color:#9B59B6; 
    margin: -19px 0 0 0; 
    width: 100%; 
}

Браузер по умолчанию имеют отступы на странице, вы можете отключить, что с html, body { padding: 0 } вместо из margin: -17px

источник

2016-05-30 11:30:05 TryingToImprove

body{ 
margin:0px; 
padding:0px; 
} 

#background 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    background-color:#9B59B6; 
    margin: 0px 0 0 0; 

}

источник

2016-05-30 11:34:02

Можете ли вы отредактировать свой предложенный ответ, чтобы расширить его действие и как он обращается к OP? –

CSS Цвет фона не заполнен, он не покрывает всю страницу правильно

ответ

Смежные вопросы