Добавить поля с обеих сторон свободного места (фона) на странице Html - css

#html #css

#HTML #css

Вопрос:

Я пытаюсь добавить поля с обеих сторон свободного пространства в Html. и заполнить фон только в средней оставшейся части.

Но этот идентификатор не работает, когда я помещаю его в тег body.

 #bodyid{
    display: block;
    margin-left:  100px;
    margin-right:  100px;
    background-color: #E3EAEA;
}

приведенные выше цвета являются случайными. Результат должен быть таким.

захват [![это должно быть результатом ]1

Спасибо за помощь.

Ответ №1:

Просто сделайте тело белым и добавьте контейнер div . Как здесь: https://jsfiddle.net/p1mz721k /

Ответ №2:

Попробуйте это :

 <html>
<head>
<meta charset="utf-8"/>
</head>
<style>
body {margin:0; padding:0; background:#fff;}
#container{
width:800px;
height:100%;
display: block;
 margin: 0 auto;
background-color: #E3EAEA;
border-left:4px #000 solid;
border-right:4px #000 solid;
}
</style>
<body>
<div id="container"></div>
</body>
<html>

Ответ №3:

У вас указана высота? Или в этом div есть содержимое?

 #bodyid {
    display: block;
    background-color: #E3EAEA;
    height: 300px;
    margin: 0 100px;
}

Ответ №4:

Сохраните тег body, но удалите для него CSS и добавьте в него div. Установите ширину div 80% и поля -правое и левое по 10% каждое. Затем добавьте свой цвет в div. Также установите высоту div 100%.

Ответ №5:

Можете ли вы исправить ширину вашего содержимого (розовый div) ?.

Если это так, попробуйте:

 .pinkDiv {
  width: 900px;
  margin: auto;
}

Ответ №6:

CSS, который у вас есть прямо сейчас, не полностью выполняет то, что вы хотите, вам нужно будет указать размер переднего плана (по-видимому, в вашем CSS не указан передний план), на основе которого вы можете управлять фоном. Подумайте с точки зрения переднего плана, измените размер переднего плана (цветной области) таким образом, чтобы получить требуемое поле с обеих сторон.

Я реализовал ваше требование здесь.

 <body>
    <div id = "blck"></div>
</body>

#blck{
    width: 1050px;
    height: 1050px;
    display: block;
    background: red;
    margin-right: 100px;
    margin-left: 100px;
}

PS: Эта реализация предназначена для широкого экрана 1280 пикселей. Ширина div составляет 1050 пикселей, потому что ваше требование составляло 100 пикселей с обеих сторон, а div неявно имеет 15 пикселей.