Hiển thị một div chiều rộng 100% với lợi nhuận

Question

Tôi muốn hiển thị một mở rộng div (width: 100%) với lợi nhuận ...

Đây là mã của tôi:

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

Và đây là mã css của tôi:

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

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

LIVE DEMO

Answer 1

Bạn có thể sử dụng CSS sau đây để đạt được kết quả mong muốn:

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

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

Answer 2

Bạn có thể sử dụng chức năng css calc() css (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; 
}​ 

Ngoài ra, hãy thử sử dụng đệm thay vì lợi nhuận và 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

Đôi khi nó tốt hơn để làm điều ngược lại và cung cấp cho các đệm mẹ div thay vì:

LIVE DEMO

Tôi đã làm gì như thay đổi CSS của #page tới:

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

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

Sau đó xóa các margin từ #margin

Lưu ý: đây cũng cho biết thêm 3% xuống còn trên và dưới (như vậy 6% đến chiều cao) mà làm cho nó một chút cao hơn 300px - vì vậy nếu bạn cần chính xác 300px, bạn có thể làm một cái gì đó như padding:10px 3%; và thay đổi height:280px; để thêm lên đến 300px một lần nữa.

Answer 4

Đối với chỉ sử dụng LESS:

Sử dụng giải pháp tốt đẹp của Vukašin Manojlović không làm việc ra khỏi hộp vì LESS thực thi các thao tác + hoặc - trong quá trình biên dịch LESS. Một giải pháp là thoát khỏi LESS để nó không thực hiện thao tác.

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); 

hoặc có thể sử dụng một mixin như:

.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

Các cách chính xác để đạt được điều này bằng cách tiêu chuẩn là:

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