Có cách nào để làm cho chiều rộng của DIV của con rộng hơn DIV gốc bằng CSS không?

Có cách nào để có một DIV con trong DIV chứa cha mẹ rộng hơn cha mẹ của nó không. DIV con cần có cùng chiều rộng của khung nhìn trình duyệt.

Xem ví dụ dưới đây:

Đứa trẻ DIV phải ở lại làm con của cha mẹ. Tôi biết tôi có thể đặt các lề âm tùy ý trên div con để làm cho nó rộng hơn nhưng tôi không thể tìm ra cách làm cho nó có chiều rộng 100% của trình duyệt.

Tôi biết tôi có thể làm điều này:

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Nhưng tôi cần đứa trẻ có cùng chiều rộng với trình duyệt động.

Cập nhật

Cảm ơn câu trả lời của bạn, có vẻ như câu trả lời gần nhất cho đến nay là đặt vị trí DIV của con: tuyệt đối và đặt thuộc tính trái và phải thành 0.

Vấn đề tiếp theo tôi gặp phải là cha mẹ có vị trí: tương đối, có nghĩa là thuộc tính trái và phải vẫn tương đối với div cha và không phải trình duyệt, xem ví dụ tại đây: jsfiddle.net/v2Tja/2

Tôi không thể loại bỏ vị trí tương đối khỏi cha mẹ mà không làm hỏng mọi thứ khác.

Sử dụng định vị tuyệt đối

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Đây là một giải pháp chung giúp giữ phần tử con trong luồng tài liệu:

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Chúng tôi đặt widthphần tử con lấp đầy toàn bộ chiều rộng của khung nhìn, sau đó chúng tôi làm cho nó đáp ứng cạnh của màn hình bằng cách di chuyển nó đến leftkhoảng cách bằng một nửa khung nhìn, trừ 50% chiều rộng của phần tử cha.

Bản giới thiệu:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Hỗ trợ trình duyệt cho vw và cho calc () thường có thể được xem là IE9 và mới hơn.

Lưu ý: Điều này giả sử mô hình hộp được đặt thành border-box. Nếu không border-box, bạn cũng sẽ phải trừ đi phần đệm và đường viền, làm cho giải pháp này trở nên lộn xộn.

Lưu ý: Khuyến khích ẩn tràn ngang của thùng chứa cuộn của bạn, vì một số trình duyệt nhất định có thể chọn hiển thị thanh cuộn ngang mặc dù không có tràn.

Tôi đã tìm kiếm rất nhiều giải pháp cho vấn đề này trong một thời gian dài. Lý tưởng nhất là chúng ta muốn có con lớn hơn cha mẹ, nhưng không biết trước những ràng buộc của cha mẹ.

Và cuối cùng tôi đã tìm thấy một câu trả lời chung chung tuyệt vời ở đây . Sao chép nguyên văn:

Ý tưởng ở đây là: đẩy container vào giữa chính xác của cửa sổ trình duyệt với bên trái: 50%;, sau đó kéo nó trở lại cạnh trái với lề -50vw âm.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Dựa trên đề xuất ban đầu của bạn (đặt lề âm), tôi đã thử và đưa ra một phương pháp tương tự bằng cách sử dụng đơn vị tỷ lệ phần trăm cho chiều rộng trình duyệt động:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Các lề âm sẽ cho phép nội dung chảy ra khỏi DIV gốc. Do đó, tôi đặt mục padding: 0 100%;tiêu đẩy nội dung trở về ranh giới ban đầu của Chlid DIV.

Các lề âm cũng sẽ làm cho tổng chiều rộng của .child-div mở rộng ra khỏi chế độ xem của trình duyệt, dẫn đến cuộn ngang. Do đó, chúng ta cần cắt bớt chiều rộng đùn bằng cách áp dụng một overflow-x: hiddenDIV Grandparent (là cha mẹ của Div mẹ):

Đây là thư viện

Tôi đã thử dùng Nils Muffersson left: calc(-50vw + 50%); nó hoạt động hoàn toàn tốt trong Chrome & FF (chưa chắc chắn về IE) cho đến khi tôi phát hiện ra các trình duyệt Safari không hoạt động đúng. Hy vọng họ đã sửa nó sớm vì tôi thực sự thích phương pháp đơn giản này.

Điều này cũng có thể giải quyết vấn đề của bạn trong đó yếu tố DIV gốc phải là position:relative

Hai nhược điểm của phương pháp này là:

• Yêu cầu đánh dấu thêm (tức là một yếu tố ông bà (giống như phương pháp căn chỉnh bảng theo chiều dọc của bảng ol 'tốt phải không ...)
• Đường viền trái và phải của DIV trẻ em sẽ không bao giờ hiển thị, đơn giản vì chúng nằm ngoài chế độ xem của trình duyệt.

Vui lòng cho tôi biết nếu có bất kỳ vấn đề nào bạn tìm thấy với phương pháp này;). Hy vọng nó giúp.

Flexbox có thể được sử dụng để làm cho một đứa trẻ rộng hơn cha mẹ của nó với ba dòng CSS.

Chỉ có đứa trẻ display, margin-leftvà widthcần phải được thiết lập. margin-leftphụ thuộc vào trẻ width. Công thức là:

margin-left: calc(-.5 * var(--child-width) + 50%);

Các biến CSS có thể được sử dụng để tránh tính toán lề trái theo cách thủ công.

Bản trình diễn số 1: Tính toán thủ công

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Bản trình diễn số 2: Sử dụng các biến CSS

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Tôi đã sử dụng điều này:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

bạn có thể thử vị trí: tuyệt đối. và đưa ra chiều rộng và chiều cao, trên cùng: 'trục y từ trên xuống' và bên trái: 'trục x'

Tôi đã có một vấn đề tương tự. Nội dung của phần tử con được cho là nằm trong phần tử cha trong khi nền phải mở rộng toàn bộ chiều rộng khung nhìn.

Tôi đã giải quyết vấn đề này bằng cách tạo phần tử con position: relativevà thêm phần tử giả ( :before) vào nó position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Phần tử giả ở lại phía sau đứa trẻ thực sự như là một phần tử nền giả. Điều này hoạt động trong tất cả các trình duyệt (ngay cả IE8 + và Safari 6+ - không có khả năng kiểm tra các phiên bản cũ hơn).

Ví dụ nhỏ fiddle: http://jsfiddle.net/vccv39j9/

Thêm vào giải pháp của Nils Muffersson, tôi cũng đang giải quyết về chiều rộng của thanh cuộn dọc. Tôi đang sử dụng 16pxlàm ví dụ, được trừ vào chiều rộng cổng xem. Điều này sẽ tránh thanh cuộn ngang xuất hiện.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

Giả sử cha mẹ có chiều rộng cố định, ví dụ #page { width: 1000px; }và được căn giữa #page { margin: auto; }, bạn muốn con phù hợp với chiều rộng của chế độ xem trình duyệt mà bạn có thể thực hiện đơn giản:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Để làm cho div div rộng như nội dung, hãy thử điều này:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Tôi biết điều này đã cũ nhưng đối với bất kỳ ai đến với câu trả lời này, bạn sẽ làm như vậy:

Tràn ẩn trên một phần tử có chứa phần tử cha, chẳng hạn như phần thân.

Cung cấp cho phần tử con của bạn một chiều rộng rộng hơn nhiều so với trang của bạn và đặt nó ở vị trí tuyệt đối còn lại -100%.

Đây là một ví dụ:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

Ngoài ra đây là một Fiddle JS: http://jsfiddle.net/v2Tja/288/

Sau đó, giải pháp sẽ là như sau.

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

Tôi đã thử một số giải pháp của bạn. Cái này :

margin: 0px -100%;
padding: 0 100%;

cho đến nay là tốt nhất, vì chúng ta không cần thêm css cho màn hình nhỏ hơn. Tôi đã tạo một codePen để hiển thị kết quả: Tôi đã sử dụng div cha với hình nền và div divon có nội dung bên trong.

https://codepen.io/yuyazz/pen/baoqBBq