Tạo vị trí tuyệt đối div mở rộng chiều cao div cha

Như bạn có thể thấy trong CSS bên dưới, tôi muốn child2định vị chính nó trước child1. Điều này là do trang web tôi hiện đang phát triển cũng nên hoạt động trên thiết bị di động, trên đó trang web child2phải ở dưới cùng, vì nó chứa điều hướng mà tôi muốn bên dưới nội dung trên thiết bị di động. - Tại sao không phải là 2 trang chủ? Đây là 2 trang duy nhất divsđược định vị lại trong toàn bộ HTML, vì vậy 2 trang chính cho thay đổi nhỏ này là quá mức cần thiết.

HTML:

<div id="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

child2 có chiều cao động, vì các trang con khác nhau có thể có ít nhiều mục điều hướng.

Tôi biết rằng các phần tử định vị tuyệt đối được loại bỏ khỏi luồng, do đó bị bỏ qua bởi các phần tử khác.
Tôi đã thử cài đặt overflow:hidden;div cha, nhưng điều đó cũng không giúp được gì clearfix.

Phương án cuối cùng của tôi sẽ là JavaScript để định vị lại hai cái divstương ứng, nhưng bây giờ tôi sẽ thử xem liệu có tồn tại một cách không phải JavaScript để làm việc này không.

Bạn đã tự trả lời câu hỏi: "Tôi biết rằng các yếu tố định vị tuyệt đối được xóa khỏi luồng, do đó bị bỏ qua bởi các yếu tố khác." Vì vậy, bạn không thể đặt chiều cao của cha mẹ theo một yếu tố được định vị tuyệt đối.

Bạn có thể sử dụng độ cao cố định hoặc bạn cần liên quan đến JS.

Mặc dù việc kéo dài các yếu tố position: absolutelà không thể, nhưng thường có các giải pháp mà bạn có thể tránh được vị trí tuyệt đối trong khi đạt được hiệu quả tương tự. Nhìn vào câu đố này để giải quyết vấn đề trong trường hợp cụ thể của bạn http://jsfiddle.net/gS9q7/

Bí quyết là đảo ngược thứ tự phần tử bằng cách thả nổi cả hai phần tử, phần tử đầu tiên bên phải, phần thứ hai bên trái, do đó phần thứ hai xuất hiện đầu tiên.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Cuối cùng, thêm một clearfix cho phụ huynh và bạn đã hoàn tất (xem fiddle cho các giải pháp hoàn chỉnh).

Nói chung, miễn là phần tử có vị trí tuyệt đối được đặt ở đầu phần tử cha, rất có thể bạn sẽ tìm thấy cách giải quyết bằng cách làm nổi phần tử.

Chargeela đúng nhưng bạn có thể nhận đượcdivhợp đồng / mở rộng củacha mẹthành yếu tố con nếu bạn đảo ngượcdivvị trícủamình như thế này:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Điều này sẽ làm việc cho bạn.

Có một cách khá đơn giản để giải quyết điều này.

Bạn chỉ cần sao chép nội dung của child1 và child2 trong div tương đối với màn hình: không có trong div cha. Nói con1_1 và con2_2. Đặt child2_2 lên trên cùng và child1_1 ở dưới cùng.

Khi jquery của bạn (hoặc bất cứ điều gì) gọi div tuyệt đối, chỉ cần đặt div tương đối (child1_1 hoặc child2_2) với display: block AND mức độ hiển thị: ẩn. Đứa trẻ tương đối sẽ vẫn vô hình nhưng sẽ làm cho div của cha mẹ cao hơn.

Với JavaScript thuần túy, bạn chỉ cần lấy chiều cao của static position phần tử con .child1bằng cách sử dụng phương thức getComputingStyle () sau đó đặt giá trị truy xuất đó làm giá trị padding-topcho cùng một đứa trẻ đó bằng cách sử dụng thuộc tính HTMLEuity.style .

Kiểm tra và chạy Đoạn mã sau đây để biết ví dụ thực tế về những gì tôi đã mô tả ở trên:

/* JavaScript */

var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");

var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;

/* CSS */

#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }

<!-- HTML -->

<div id="parent">
    <div class="child1">STATIC</div>
    <div class="child2">ABSOLUTE</div>
</div>

Tôi đã có một vấn đề tương tự. Để giải quyết vấn đề này (thay vì tính chiều cao của iframe bằng phần thân, tài liệu hoặc cửa sổ) tôi đã tạo một div bao bọc toàn bộ nội dung trang (ví dụ: div có id = "page") và sau đó tôi đã sử dụng chiều cao của nó.

Câu hỏi này đã được hỏi vào năm 2012 trước khi flexbox. Cách chính xác để giải quyết vấn đề này bằng CSS hiện đại là truy vấn phương tiện và đảo ngược cột flex cho thiết bị di động. Không cần định vị tuyệt đối.

https://jsfiddle.net/tnhsaesop/vjftq198/3/

HTML:

<div class="parent">
  <div style="background-color:lightgrey;">
    <p>
      I stay on top on desktop and I'm on bottom on mobile
    </p>
  </div>
  <div style="background-color:grey;">
    <p>
      I stay on bottom on desktop and I'm on bottom on mobile
    </p>
  </div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

Tôi đã đưa ra một giải pháp khác mà tôi không yêu thích nhưng hoàn thành công việc.

Về cơ bản sao chép các phần tử con theo cách mà các bản sao không thể nhìn thấy.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Nếu những phần tử con đó chứa ít đánh dấu, thì tác động sẽ nhỏ.

"Bạn có thể sử dụng độ cao cố định hoặc bạn cần liên quan đến JS."

Dưới đây là ví dụ về JS:

---------- Ví dụ về jQuery JS --------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

Có một cách hack rất đơn giản giúp khắc phục vấn đề này

Đây là một hộp mã và minh họa cho giải pháp: https://codesandbox.io/s/00w06z1n5l

HTML

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

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

bạn có thể chơi với định vị của hack div để ảnh hưởng đến vị trí của con.

Đây là một đoạn:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

Có một cách tốt hơn để làm điều này bây giờ. Bạn có thể sử dụng tài sản dưới cùng.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Điều này rất giống với những gì @ChrisC đề xuất. Nó không sử dụng một yếu tố định vị tuyệt đối, mà là một yếu tố tương đối. Có lẽ có thể làm việc cho bạn

<div class="container">
  <div class="my-child"></div>
</div>

Và css của bạn như thế này:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

Cũng xem xét phương pháp tiếp theo:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Ngoài ra, vì bạn đang cố gắng định vị lại div, hãy xem xét lưới css

Absolute xem vị trí của mình so với tổ tiên gần nhất không được tĩnh vị trí ( position: static), vì thế nếu bạn muốn một cái nhìn tuyệt đối vị trí chống lại cha mẹ nhất định, thiết lập các mẹ positionđến relativevà đứa trẻ đến positionđểabsolute

Hãy thử nó, nó đã làm việc cho tôi

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

Nó sẽ đặt chiều cao con thành chiều cao cha mẹ