Wyświetlanie szerokości div 100% z marginesami

Question

chcę wyświetlić rozszerzalny div (width: 100%) z marginesami ...

Oto mój kod:

<div id="page"> 
    <div id="margin"> 
     "some content here" 
    </div> 
</div>​ 

I tu jest mój kod css:

#page { 
    background: red; 
    float: left; 
    width: 100%; 
    height: 300px; 
} 

#margin { 
    background: green; 
    float: left; 
    width: 100%; 
    height: 300px; 
    margin: 10px; 
}​ 

LIVE DEMO

Answer 1

Można użyć następującego CSS, aby osiągnąć pożądany rezultat:

#page { 
    background: red; 
    overflow: auto; 
} 

#margin { 
    background: green; 
    height: 280px; 
    margin: 10px 
} 

Answer 2

Można użyć funkcji css calc() (browser support).

#page { 
    background: red; 
    float: left; 
    width: 100%; 
    height: 300px; 
} 

#margin { 
    background: green; 
    float: left; 
    width: -moz-calc(100% - 10px); 
    width: -webkit-calc(100% - 10px); 
    width: -o-calc(100% - 10px); 
    width: calc(100% - 10px); 
    height: 300px; 
    margin: 10px; 
}​ 

Alternatywnie, można użyć dopełnienie zamiast marginesu i box-sizing: border-box (browser support):

#page { 
    background: red; 
    width: 100%; 
    height: 300px; 
    padding: 10px; 
} 

#margin { 
    box-sizing: border-box; 
    background: green; 
    width: 100%; 
    height: 300px; 
} 

Answer 3

Czasami lepiej zrobić odwrotnie i daje rodzic div wyściółkę zamiast:

LIVE DEMO

Co zrobiłem w jak zmienić CSS #page do:

#page { 
    padding: 3%; 
    width: 94%; /* 94% + 3% +3% = 100% */ 

    /* keep the rest of your css */ 
    /* ... */ 
} 

Następnie usuń margin z #margin

Uwaga: ten dodaje również 3% do górnej i dolnej (tak 6% do wysokości), co sprawia, że ​​trochę wyższy niż 300px - więc jeśli potrzebujesz dokładnie 300px, możesz zrobić coś takiego jak padding:10px 3%; i zmienić height:280px;, aby ponownie dodać 300px.

Answer 4

For tylko mniej użytkowników:

Korzystanie z miłą rozwiązanie Vukasin Manojlović nie działa po wyjęciu z pudełka, ponieważ LESS wykonuje operacje + lub - podczas kompilacji LESS. Jednym z rozwiązań jest uniknięcie LESS, aby nie wykonywał operacji.

Disable LESS-CSS Overwriting calc()

@someMarginVariable = 15px; 

margin: @someMarginVariable; 
width: calc(~"100% - "@someMarginVariable*2); 
width: -moz-calc(~"100% - "@someMarginVariable*2); 
width: -webkit-calc(~"100% - "@someMarginVariable*2); 
width: -o-calc(~"100% - "@someMarginVariable*2); 

lub można użyć wstawek jak:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) { 
    @minusValue: (@marginSize+@paddingSize)*2; 
    padding: @paddingSize; 
    margin: @marginSize; 
    width: calc(~"100% - "@minusValue); 
    width: -moz-calc(~"100% - "@minusValue); 
    width: -webkit-calc(~"100% - "@minusValue); 
    width: -o-calc(~"100% - "@minusValue); 
} 

Answer 5

poprawny sposób to osiągnąć przez normy jest:

#margin { 
    background: green; 
    height: 280px; 
    margin: 10px; 
    width: auto; 
    display: block; 
}