Làm thế nào để tạo chiều rộng CSS để điền vào cha mẹ?

88

Tôi chắc chắn vấn đề này đã được hỏi trước đây nhưng dường như tôi không thể tìm ra câu trả lời.

Tôi có đánh dấu sau:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

Mong muốn của tôi là làm cho foo có chiều rộng là 600px( width: 600px;) và làm cho thanh có các hành vi sau:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

Nói cách khác, thay vì đặt chiều rộng của thanh, 592pxtôi muốn đặt chiều rộng bên ngoài của thanh để 100%nó được tính toán 592px. Điều quan trọng ở đây là tôi có thể thay đổi chiều rộng của foo thành 800pxvà thanh sẽ tính toán khi hiển thị thay vì tôi phải làm phép toán cho tất cả các trường hợp này theo cách thủ công.

Điều này có khả thi trong CSS thuần túy không?

Một số thú vị hơn với nó:

  • Nếu #barlà một cái bàn thì sao?
  • Nếu #barlà một textarea thì sao?

  • Nếu #barlà đầu vào thì sao?

  • Điều gì xảy ra nếu #foolà một ô trong bảng ( td)? (Điều này có thay đổi vấn đề không hay vấn đề giống hệt nhau?)

Cho đến nay table#bar, input#barđã được thảo luận. Tôi chưa thấy giải pháp tốt cho textarea # bar. Tôi nghĩ rằng một vùng văn bản không có viền / lề / đệm với một divlớp bọc có thể hoạt động với divkiểu được tạo kiểu để làm việc như các đường viền cho textarea.

css 
— Dmitriy Likhten
nguồn

Câu trả lời:

39

CHỈNH SỬA :

Ba yếu tố khác nhau đó đều có các quy tắc kết xuất khác nhau.

Vì vậy đối với:

table#barbạn cần đặt chiều rộng thành 100% nếu không nó sẽ chỉ rộng như nó xác định là cần. Tuy nhiên, nếu tổng chiều rộng của các hàng trong bảng lớn hơn chiều rộng của barnó thì nó sẽ mở rộng đến chiều rộng cần thiết. NẾU tôi nhớ, bạn có thể chống lại điều này bằng cách thiết lập display: block !important;mặc dù đã được một thời gian kể từ khi tôi phải sửa điều đó. (Tôi chắc chắn ai đó sẽ sửa cho tôi nếu tôi sai).

textarea#bari beleive là một phần tử cấp khối nên nó sẽ tuân theo các quy tắc giống như div. Lưu ý duy nhất ở đây là textarealấy một thuộc tính của colsvà rowsđược đo bằng cột ký tự. Nếu điều này được chỉ định trên phần tử, nó sẽ ghi đè chiều rộng được chỉ định bởi css.

input#barlà một phần tử nội tuyến, vì vậy theo mặc định, bạn không thể gán chiều rộng cho nó. Tuy nhiên, tương tự như thuộc tính textarea's cols, nó có một sizethuộc tính trên phần tử có thể xác định chiều rộng. Điều đó nói rằng, bạn luôn có thể xác định chiều rộng bằng cách sử dụng display: block;trong css của bạn cho nó. Sau đó, nó sẽ tuân theo các quy tắc kết xuất tương tự như div.

td#foosẽ được hiển thị như một table-cellthứ có một số điên rồ với nó. Điểm mấu chốt ở đây là đối với các mục đích của bạn, nó sẽ hoạt động giống div#foonhư giới hạn chiều rộng của nội dung. Vấn đề duy nhất ở đây là văn bản có thể không được áp dụng trong cột ở đâu đó sẽ khiến nó bỏ qua cài đặt chiều rộng của bạn. Ngoài ra, tất cả các ô trong cột sẽ nhận được chiều rộng của ô rộng nhất.

Đó là hành vi mặc định của phần tử mức khối - tức là. nếu chiều rộng là auto(mặc định) thì nó sẽ là 100% chiều rộng bên trong của phần tử chứa. về bản chất:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

sẽ cung cấp cho bạn chính xác những gì bạn muốn.

— thần đồng
nguồn
Này cảm ơn nhé. Cũng vui vẻ với bàn quyết định chảy máu dù sao. Tôi giả sử các bảng có hành vi giống như các div?
— Dmitriy Likhten
@Dimitry: Không, họ có các quy tắc đặc biệt khiến chúng giống inline-blockhơn blockcác phần tử. Lưu ý rằng mặc dù tôi đã nói nhiều hơn không giống như :-) Những gì bạn có thể đang gặp phải là trừ khi được định nghĩa khác, chúng thường sẽ mở rộng để chứa tất cả các cột, điều này có thể thực sự gây khó chịu nếu một số tiêu đề / ô có văn bản dài không thể trích xuất trong đó.
— prodigitalson
Cảm ơn bạn đã giúp :) Hãy để tôi cập nhật câu hỏi một chút để cung cấp một cái nhìn tổng quan đầy đủ hơn về các vấn đề và hy vọng tất cả các cách giải quyết có thể được liệt kê trong một phần.
— Dmitriy Likhten
Tôi đã thử nghiệm với thanh div # foo table # và chiều rộng thiết lập: 100% trên table # bar thực sự sẽ mở rộng bảng, nhưng các đường viền / lề của bảng sẽ tràn qua div # foo. Đặt bảng để hiển thị: khối là không tốt vì nó ảnh hưởng đến các khía cạnh khác của kết xuất bảng, chẳng hạn như xử lý chiều rộng của hàng. textarea # bar sẽ không mở rộng khi chiều rộng được đặt thành tự động hoặc không được đặt.
— Dmitriy Likhten
1
vì textarea#barbạn có thể đặt điều đó thành display: blockvới ít tác dụng phụ. Theo như bảng, tôi biết tôi đã sử dụng một số loại giải pháp / giảm thiểu cho điều đó trong quá khứ nhưng tôi không nhớ nó là gì vào lúc này. Tuy nhiên, tôi sẽ nói rằng tôi thường không đặt "lề" trên bảng mà thay vào đó bọc nó trong một div có đệm / lề ... đây có thể là chính #foo hoặc một div khác đã sử dụng jsut để áp dụng loại khoảng cách này. Ngoài ra, bạn có thể làm để chống lại vấn đề về đường viền để chỉ áp dụng đường viền cho ô đầu tiên / ô cuối cùng trong một hàng / các ô trong hàng đầu tiên / cuối cùng
— prodigitalson
28

gần như ở đó, chỉ cần thay đổi outerWidth: 100%;thành width: auto;(externalWidth không phải là thuộc tính CSS)

cách khác, hãy áp dụng các kiểu sau cho thanh:

width: auto;
display: block;
— Rowan
nguồn
4
Điều đó sẽ không hoạt động nếu anh ta đang đặt một phần đệm vào barvì sẽ được thêm vào 100% hiệu quả tạo ra barrộng hơn cha mẹ của nó foo.
— prodigitalson
vâng, tôi đã trả lời câu đó quá nhanh; P
— Rowan
Chờ giây lát. Vì vậy, nếu tôi đặt thuộc tính width thành bất kỳ thứ gì, nó sẽ chảy qua? width: auto không phải là giải pháp, đúng hơn là không thiết lập chiều rộng là?
— Dmitriy Likhten
2
Vâng đúng rồi. Bất kỳ phần tử nào có display:block;(còn được gọi là phần tử mức khối) sẽ áp dụng hành vi này. một phần tử DIV có width:auto;và display:block;được đặt theo mặc định.
— Rowan
Bài cũ, nhưng anh ấy không thể chỉ sử dụng box-sizing: border-box để cho phép phần đệm nằm bên trong chiều rộng của phần tử.
— CHBresser
16

Sử dụng các kiểu 

left: 0px;

hoặc và

right: 0px;

hoặc và

top: 0px;

hoặc và

bottom: 0px;

Tôi nghĩ rằng đối với hầu hết các trường hợp sẽ làm được việc

— Tigsar
nguồn
4

Vì vậy, sau khi nghiên cứu, điều sau được phát hiện ra:

Đối với một div#barcài đặt display:block; width: auto;gây ra tương đương vớiouterWidth:100%;

Đối với một, table#barbạn cần phải bọc nó trong một div với các quy tắc được nêu bên dưới. Vì vậy, cấu trúc của bạn trở thành:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

Bằng cách này, bảng chiếm 100% div mẹ và #barWrapđược sử dụng để thêm đường viền / lề / đệm vào #barbảng. Lưu ý rằng bạn sẽ cần đặt nền của toàn bộ nội dung #barWrapvà #barnền của phải trong suốt hoặc giống như #barWrap.

Đối với textarea#barvà input#barbạn cần phải làm điều tương tự như table#bar, mặt trái của nó là bằng cách loại bỏ các đường viền, bạn ngừng hiển thị widget gốc của input / textarea và các #barWrapđường viền của chúng sẽ trông hơi khác so với mọi thứ khác, vì vậy bạn có thể sẽ phải phong cách tất cả các đầu vào của bạn theo cách này.

— Dmitriy Likhten
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.