Div 100% в теле с полями

Question

Div 100% в теле с полями

0

У меня есть "тело" с 40px маржи.

Более того, я хочу добавить div со 100% высоты и 100% в весе со "статической позицией".

Моя проблема в том, что мой "div" выходит за пределы "тела"! Я хочу, чтобы мой div заполнил "тело" (с учетом его края: 40 пикселей).

Как я могу решить эту проблему?

Thks

МОЙ JS FIDDLE

body { 
    background:pink;
    margin:40px;
    }

.contenuWorks {
    height:100%;
    width: 100% ;
    background:red;
    position:absolute;
    }

Bonjour 16 фев. 2014, в 20:04

Источник

0

Ну ... не могли бы вы объяснить проблему немного подробнее? Если я посмотрю на JS Fiddle, то это будет похоже на то, чего ты пытаешься достичь.
berentrom 16 фев. 2014, в 20:05
0

Для вас важно, чтобы фон div не касался краев тела?
Phrogz 16 фев. 2014, в 20:13
0

@EmeryFramboise Я думаю, что @Bonjour хочет иметь розовую рамку размером 40 пикселей вокруг .countenuWorks . Не только сверху и слева.
Jason Aller 16 фев. 2014, в 20:13

Показать ещё 1 комментарий

Теги:

html

css

margin

absolute

3 ответа

0

если вы выбираете бокс-модель с box-sizing, вы можете превратить эту проблему в нет.

Сначала запустите коробку с помощью: box-sizing:border-box; http://www.w3.org/TR/css3-ui/#box-sizing0/http://quirksmode.org/css/user-interface/boxsizing.html

Затем превратите край тела в padding в html. Если вы выберете: border-box он включает границу и дополнение в размер, заданный в CSS.

<div>  
    box-sizing and use   
    <code>height: 100%; width : 100%;</code>  
    without headhakes. 
</div>

html, body, div {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  height:100%;
  width:100%;
  border:solid;
  margin:0;  
}
html {
  padding:40px;
  border:solid red;
}
body {
  border:solid blue;
}
div{
  border:solid yellow;
  background:pink;
}

http://codepen.io/gc-nomade/pen/Fjqzn

G-Cyr 16 фев. 2014, в 20:16

-1

Сценарий: http://jsfiddle.net/sbDSy/2/

Почему бы не применить padding к div вместо margin к body:

.contenuWorks {
    height:100%;
    width: 100% ;
    padding:40px;
    background:red;
    position:absolute;
}

body {
    margin:0;
    padding:0;
}

Lucky Soni 16 фев. 2014, в 17:32

0

Потому что это не будет работать с блочной моделью контента. jsfiddle.net/sbDSy/3 Вы сделали его слишком широким. Добавьте модель коробки с padding-box и вы получите победителя. Предполагая, что OP в порядке с фоном, заполняющим страницу.
Phrogz 16 фев. 2014, в 20:10
0

как насчет использования box-sizing ?
G-Cyr 16 фев. 2014, в 22:05

Ещё вопросы

Ну ... не могли бы вы объяснить проблему немного подробнее? Если я посмотрю на JS Fiddle, то это будет похоже на то, чего ты пытаешься достичь.
Для вас важно, чтобы фон div не касался краев тела?
@EmeryFramboise Я думаю, что @Bonjour хочет иметь розовую рамку размером 40 пикселей вокруг .countenuWorks . Не только сверху и слева.
Потому что это не будет работать с блочной моделью контента. jsfiddle.net/sbDSy/3 Вы сделали его слишком широким. Добавьте модель коробки с padding-box и вы получите победителя. Предполагая, что OP в порядке с фоном, заполняющим страницу.
как насчет использования box-sizing ?

Alexey Prokhorov · Accepted Answer · 2014-02-16T17-37-00.000Z

Если вы используете абсолютное позиционирование, вы можете просто установить координаты div.

Сценарий: http://jsfiddle.net/EQEPY/

.contenuWorks {
    left: 40px;
    right: 40px;
    top: 40px;
    bottom: 40px;
    background:red;
    position:absolute;
}