Question

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.OpenOption;
import java.nio.file.Path;

public class UnambiugousMethodWrappers{
    public static Path writeBytes (Path path, byte[] bytes, OpenOption... options) throws IOException {
        return Files.write(path, bytes, options);
    }
}

http://codepen.io/dye/pen/YVyoVd

在这种布局中，我有2列，每列可以增大。我希望右列的高度由左列的高度控制，但不是相反。

点击＆＃34;添加内容＆＃34;左下方框中的按钮将增加左列和右列。这符合预期。

目前，点击＆＃34;添加内容＆＃34;右列中的按钮将生成左列。这是无意的。我希望右列的高度最多为左列的高度，并且内部的内容可以滚动。这可能是CSS网格还是我需要使用JS？

Answer 1

您可以在绝对位置使用额外的包装，以避免与原始布局进行交互。

＆＃13;

<?php
if( isset($_GET['value']) ){
    $mail = $_GET['value'];
}

＆＃13;

const btns = document.querySelectorAll('.add-content-btn');
btns.forEach(btn => {
  btn.addEventListener('click', e => {
    const parent = e.target.parentElement;
    for (let i = 0; i < 3; i++) {
      const newLine = document.createElement('p');
      newLine.innerText = 'Dynamic content';
      parent.append(newLine);
    }
  });
})

＆＃13;

body {
  padding: 16px;
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "topbar topbar" "title  sidebar" "box1   sidebar" "box2   sidebar" "box3   sidebar" "box4   sidebar";
  grid-template-columns: 70% 30%;
  grid-template-rows: 28px 30px 500px 50px 20px auto;
}

.grid__item {
  border: 1px solid black;
}

.topbar {
  grid-area: topbar;
}

.title {
  grid-area: title;
}

.box1 {
  grid-area: box1;
}

.box2 {
  grid-area: box2;
}

.box3 {
  grid-area: box3;
}

.box4 {
  grid-area: box4;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  position: relative;
}

.buffer {
  padding: 10px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:auto;
}

＆＃13;

来自我的评论：

您可以尝试使用<div class="grid"> <div class="grid__item topbar"></div> <div class="grid__item title"></div> <div class="grid__item box1"></div> <div class="grid__item box2"></div> <div class="grid__item box3"></div> <div class="grid__item box4"> <button class="add-content-btn">Add content</button> <p>Dynamic content</p> </div> <div class="grid__item sidebar"> <div class="buffer"> <button class="add-content-btn">Add content</button> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> <p>Dynamic content</p> </div> </div> </div>和max-height，但规格不清楚，Firefox会显示Chrome不会http://codepen.io/gc-nomade/pen/Wjryym
的滚动条
您应该在javascript上转发或在侧栏http://codepen.io/gc-nomade/pen/JNGZwW内的overflow absolute中使用额外的元素集

具有动态高度列的CSS网格

1 个答案: