Thoát khỏi các giới hạn của một hộp chứa div

Được rồi, tôi hiểu rằng mục đích của DIV là chứa các phần tử bên trong của nó - Tôi không muốn làm phiền ai bằng cách nói cách khác. Tuy nhiên, hãy xem xét trường hợp sau:Thoát khỏi các giới hạn của một hộp chứa div

Trang web của tôi (chỉ chiếm 70% toàn bộ trang) được bao quanh bởi vùng chứa (div). Tuy nhiên, dưới thanh điều hướng của tôi ở đầu trang, tôi muốn tạo biểu ngữ w chiếm 100% chiều rộng của toàn bộ trang (có nghĩa là nó sẽ phải mở rộng ra ngoài giới hạn của vùng chứa của nó dưới dạng container chỉ chiếm 70% chiều rộng của trang).

Đây là ý tưởng cơ bản mà tôi đang cố gắng để hoàn thành: http://www.petersonassociates.biz/

Có ai có bất cứ đề nghị cho làm thế nào tôi có thể thực hiện điều này? Tôi đánh giá cao sự giúp đỡ nào.

Evan

Nguồn

2011-10-14 Anonymous

Trang web cụ thể đó sử dụng cách dễ nhất, đó là hình ảnh: http://www.petersonassociates.biz/wp-content/themes/rapeterson/img/globalbg.jpg –

+1 cho "Tôi không muốn để làm khó chịu bất cứ ai " – Brent

Nếu tôi hiểu đúng,

style="width: 100%; position:absolute;"

nên đạt được những gì bạn đang đi cho.

Nguồn

2011-10-14 01:53:10 Dennis

Cách đúng ngữ pháp hơn để thực hiện việc này là đặt tiêu đề của bạn bên ngoài vùng chứa chính, tránh position:absolute.

Ví dụ:

<html> 
    <head> 
    <title>A title</title> 
    <style type="text/css"> 
     .main-content { 
     width: 70%; 
     margin: 0 auto; 
     } 
    </style> 
    </head> 
    <body> 
    <header><!-- Some header stuff --></header> 
    <section class="main-content"><!-- Content you already have that takes up 70% --></section> 
    <body> 
</html>

Phương pháp khác (giữ nó trong <section class="main-content">) là như bạn nói, không chính xác, như một div (hoặc phần) được cho là chứa các thành phần, không có họ mở rộng ra khỏi giới hạn của div/phần gốc của họ. Bạn cũng sẽ phải đối mặt với vấn đề trong IE (tôi tin rằng bất cứ điều gì 7 hoặc thấp hơn, điều này có thể chỉ là IE6 hoặc ít hơn) nếu div con của bạn mở rộng bên ngoài div cha.

Nguồn

2011-10-14 02:33:16

+1 Đây là cách tôi sẽ làm điều đó, nhưng bạn có thể để nguyên khai báo chiều rộng của kiểu' .header' (hoặc làm 'width: auto'). Theo mặc định, phần tử cấp khối rộng bằng phần tử chứa phần tử. Bằng cách đó bạn không gặp phải vấn đề khi thêm margin/padding vào nó. Tôi sẽ không nói đây là phương pháp "ngữ nghĩa" hơn, nhưng nó ít lộn xộn hơn. – Brent

Điểm tốt cả, tôi đã chỉnh sửa ở trên để xóa CSS không cần thiết trên tiêu đề và sử dụng các phần tử HTML5 để làm cho mã ngữ nghĩa hơn ... không phải là từ thích hợp, có thể chỉ thích hợp hơn;) –

Có một số cách bạn có thể thực hiện việc này.

Absolute Positioning
Giống như những người khác đã gợi ý, nếu bạn cung cấp cho các yếu tố mà bạn muốn kéo dài trên khắp các thuộc tính trang CSS 100% chiều rộng và vị trí tuyệt đối, nó sẽ kéo dài toàn bộ chiều rộng của trang.

Tuy nhiên, nó cũng sẽ nằm ở đầu trang, có thể che khuất nội dung khác của bạn, sẽ không tạo chỗ cho nội dung hiện tại của bạn 100%. Định vị tuyệt đối sẽ xóa phần tử khỏi luồng tài liệu, vì vậy nó sẽ hoạt động như thể nội dung mới được định vị của bạn không tồn tại. Trừ khi bạn chuẩn bị để tính toán chính xác nơi mà yếu tố mới của bạn nên và nhường chỗ cho nó, đây có lẽ không phải là cách tốt nhất.

Hình ảnh: bạn cũng có thể sử dụng bộ sưu tập hình ảnh để xem nội dung mình muốn, nhưng chúc may mắn cập nhật hoặc thay đổi chiều cao của bất kỳ phần nào trên trang của bạn, v.v.

DIV được tạo hình
Đây là cách tôi khuyên bạn nên làm điều đó. Trước khi chúng ta lo lắng về bất kỳ công cụ nào có chiều rộng 100%, trước tiên tôi sẽ chỉ cho bạn cách thiết lập cái nhìn trung tâm 70%.

<div class="header"> 
<div class="center"> 
    // Header content 
</div> 
</div> 
<div class="mainContent"> 
<div class="center"> 
    // Main content 
</div> 
</div> 
<div class="footer"> 
<div class="center"> 
    // Footer content 
</div> 
</div>

Với CSS như thế này:

.center { 
    width: 70%; 
    margin: 0 auto; 
}

Bây giờ bạn có những gì xuất hiện là một container xung quanh nội dung trọng tâm của bạn, khi trong thực tế mỗi hàng của nội dung di chuyển xuống trang được tạo thành từ một div chứa, với một lớp ngữ nghĩa và mô tả (như header, mainContent, vv), với một lớp "center" bên trong nó.

Với thiết lập, làm cho tiêu đề xuất hiện để "phá vỡ ra khỏi div container" là dễ dàng như:

.header { 
    background-color: navy; 
}

Và màu sắc đạt đến các cạnh của trang. Nếu vì một số lý do bạn muốn nội dung bản thân căng trên trang, bạn có thể làm:

.header .center { 
    width: auto; 
}

Và phong cách đó sẽ ghi đè lên phong cách .center, và làm cho nội dung của tiêu đề mở rộng đến các cạnh của trang .

Chúc may mắn!

Nguồn

2011-10-14 03:18:56 rhodesjason

Nếu bạn chỉ muốn nền của phần tử mở rộng trên toàn bộ trang, điều này cũng có thể đạt được với lợi nhuận tiêu cực.

Tóm lại (chỉnh từ bình luận):

.bleed { 
padding-left: 3000px; 
margin-left: -3000px; 
padding-right: 3000px; 
margin-right: -3000px; 
}

Cung cấp cho bạn thanh cuộn ngang mà bạn loại bỏ với:

body {overflow-x: hidden; }

Có một hướng dẫn tại http://www.sitepoint.com/css-extend-full-width-bars/. Có thể có nhiều ngữ nghĩa hơn để làm điều này với các yếu tố psuedo: http://css-tricks.com/full-browser-width-bars/

Nguồn

2013-10-31 22:11:32 Mark

100% không làm việc, nhưng 3000px đã làm, cảm ơn – max4ever

Tuyệt vời! Tôi đã sử dụng giải pháp này (trừ phần tràn: ẩn) trên trang web Thrive Themes WordPress để khắc phục một số kiểu ngớ ngẩn mà chúng đã đặt trước và nó hoạt động như một sự quyến rũ. –

Đây phải là câu trả lời được chấp nhận, là vị trí: tuyệt đối; sửa chữa loại bỏ phần tử khỏi phần thân của luồng, yêu cầu đánh dấu phụ trên các phần tử khác để đảm bảo rằng các phần tử đã nói không bị chồng chéo bởi mã toàn chiều rộng. – Adam

Tôi đoán tất cả các giải pháp đều lỗi thời.

Cách tốt nhất để thoát khỏi giới hạn của một nguyên tố là bằng cách thêm:

margin-left: calc(~"-50vw + 50%"); 
    margin-right: calc(~"-50vw + 50%");

thảo luận có thể được tìm thấy here và here. Ngoài ra còn có một giải pháp tốt đẹp cho sắp tới grid-layouts.

Nguồn

2017-09-18 15:11:04

Nhận xét này cực kỳ hữu ích. Đã cố gắng tìm một giải pháp tốt đẹp cho việc phá vỡ vùng chứa bố cục lưới Materialize CSS và điều này đã làm – CDerrig

Thoát khỏi các giới hạn của một hộp chứa div

Trả lời

Các vấn đề liên quan