Có thể tạo một div 50px nhỏ hơn 100% trong CSS3 không?

Question

Có thể thực hiện div 50px dưới 100% CSS thuần túy không? Tôi muốn <div> chỉ nhỏ hơn 50px. Tôi không muốn bất kỳ JavaScript nào.

Answer 1

Có thể. Nếu không sử dụng số expression() của IE, bạn có thể thực hiện điều đó trong CSS3 bằng cách sử dụng calc().

div { 
    width: 100%; 
    width: -webkit-calc(100% - 50px); 
    width: -moz-calc(100% - 50px); 
    width: calc(100% - 50px); 
} 

Demo: http://jsfiddle.net/thirtydot/Nw3yd/66/

Điều này sẽ làm cho cuộc sống của bạn dễ dàng hơn rất nhiều. Nó hiện đang được hỗ trợ trong 3 trình duyệt chính: Firefox, Google Chrome (WebKit), và IE9: http://caniuse.com/calc

MDN: https://developer.mozilla.org/en/CSS/-moz-calc

Answer 2

Một DIV tự động chụp rộng mẹ của. Vì vậy, không cần phải xác định bất kỳ width. Thông thường chỉ đơn giản là sẽ viết nó như thế này:

div{ 
    margin-right:50px; 
} 

Kiểm tra này fiddle

Answer 3

lựa chọn khác là định vị tuyệt đối.

div { 
    position: absolute; 
    left: 0; 
    right: 50px; 
} 

fiddle

Nhưng, giải pháp Sandeep là một trong những bạn thường nên sử dụng. Chỉ cần tránh lạm dụng float. Điều này ngăn cản các yếu tố tự nhiên làm đầy container của họ.

Answer 4

Vâng, chúng tôi có thể làm điều đó bằng cách làm cho

#custom_div{ 
width:100%; 
margin-right:50px; 
} 

Cảm ơn

Answer 5

Giải pháp của tôi làm việc có và không có float: left.

HTML:

<div></div> 

css:

div { 
    height: 20px; 
    background: black; 
    float: left; 
    width: 100%; 
    padding-right: 50px; 
    box-sizing: border-box; 
    background-clip: content-box; 
}​ 

Demo

Compatibility:
Firefox 3.6, Safari 5, Chrome 6, Opera 10, IE 9

Answer 6

jsFiddle

Sử dụng màn hình block và margin. display:block khi không được kết hợp với một số height/width được xác định sẽ cố gắng điền vào đó là cấp độ gốc.

header { 
    width:100%; 
    background:#d0d0d0; 
    height:100%; 
} 
h1 { 
    display:block; 
    border:#000 solid 1px; 
    margin:0 50px 0 0; 
    height:100px; 
} 
<header> 
    <h1></h1> 
</header>