Làm cách nào để tạo một div vị trí tuyệt đối có chiều rộng bằng với bố mẹ trừ đi một số lề

Question

Tôi muốn có một div bên trong các trang web bên trong các div chứa có kích thước khác nhau và bắt đầu ở vị trí cố định bên trái và sau đó có chiều rộng lấp đầy phần còn lại của container. Tôi đã bao gồm một số ví dụ css dưới đây để cố gắng để có được điểm trên.

Tôi phải sử dụng vị trí tuyệt đối để không thể chỉ nổi bên phải và đặt lề trái. Bất kỳ ý tưởng làm thế nào để làm cho công việc này với vị trí tuyệt đối? Tôi cũng đã thử chiều rộng: tự động và một số tùy chọn kích thước hộp khác nhau.

Để làm rõ, sự phức tạp của điều này là biên giới bên trái phải được cố định và đường viền trái phải đối diện với đường viền bên phải của vùng chứa. Tôi không thể sử dụng vị trí: tương đối và javascript, nhưng có lẽ tôi sẽ kết thúc tạo các div .inner1 và .inner2 với độ rộng được mã hóa cứng trước khi thực hiện điều đó. Nhưng hy vọng tránh điều đó.

.container1 { 
    position: relative; 
    width: 400px; 
    height: 300px; 
} 

.container2 { 
    position: relative; 
    width: 500px; 
    height: 300px; 
} 

.inner { 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    height: 100%; 
    width: 100%; 
} 

Answer 1

Chỉ cần xác định tất cả các top, left, bottom, và right tài sản và hộp sẽ mở rộng để có mặt tại tất cả các điểm này.

.container { 
    position: relative; 
    width: 400px; 
    height: 300px; 
} 

.inner { 
    position: absolute; 
    top: 0; 
    left: 200px; 
    bottom: 0; 
    right: 0; 
} 

See the jsFiddle.

Answer 2

Tôi không nhận được chính xác những gì bạn cần nhưng tại sao bạn không sử dụng tỷ lệ phần trăm?

Thay vì:

.inner { 
    position: absolute; 
    top: 0px; 
    left: 200px; 
    height: 100%; 
    width: 100%; 
} 

Tại sao bạn không sử dụng một cái gì đó như:

.inner { 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    height: 100%; 
    width: 50%; 
} 

tỷ lệ cài đặt cho thuộc tính trái và chiều rộng cho phù hợp. 40-60, 30-70 và vân vân.

Hy vọng điều này sẽ hữu ích. Nếu không, vui lòng nêu rõ hơn một chút.

Kính trọng

Answer 3

Công trình này hoạt động. Thay đổi chiều rộng của hộp bên ngoài thành bất kỳ thứ gì bạn muốn và hộp bên trong phát triển để phù hợp với nó.

.container { 
    width: 400px; 
    height: 300px; 
} 

.inner { 
    position: relative; 
    margin-left: 200px; 
    height: 100%; 
} 

Edit: here's a fiddle