Ограничение ширины страницы только половина размера браузера

Question

Я в настоящее время обучения веб-дизайн, и я решала некоторые проблемы выборки в Интернете, был один конкретный случай, когда меня попросили:

1. Напишите правило CSS, которое ограничивает ширину веб-страницы только половиной размера браузера и центрирует ее в окне браузера.

2. Добавьте правило CSS в правило выше, чтобы отобразить зеленый цвет фона, который заполняет все окно браузера, включая пустые левые и правые стороны.

Для 2, я мог бы использовать это:

body { 
    background-color: green; 
} 

Но на 1, я не мог этого сделать. Как получить размер браузера? Это звучит странно.

Answer 1

Установите этот CSS на свое тело.

body{ 
    width:50%; 
    margin: 0 auto; 
    background-color: green; 
    overflow: hidden; //just in case if you don't want your any fixed width element crosses the body width. 
} 

Answer 2

Все, что вам нужно сделать, это установить width: 50%;

Или, если вы хотите установить на максимум 50%, используйте max-width: 50%;

В центре установите margin-left: auto; и margin-right: auto;

Answer 3

это очень легко просто один шаг, который вы должны принять попробовать этот

body { 
    width: 50%; 
    margin: 0 auto; //optional if you want your page in center 
}