Question

我有两列。带有长导航和主要内容的侧边栏。侧边栏的高度始终高于主要内容。我希望侧边栏与主列的高度相等。侧边栏将<form id="{{ $unit->id }}" style="display: inline-block;" method="post" action="{{ url("estates/$estate->uid/units/$unit->uid") }}"> {{ csrf_field() }} <input type="hidden" name="_method" value="delete"> <a id="deleteUnit-{{ $unit->id }}" class="btn btn-simple btn-danger" rel="tooltip" data-placement="left" title="Eliminar" name="eliminar" data-id="{{ $unit->id }}"> <i class="fa fa-times"></i> </a> </form>，不应高于主要内容。我无法使用$('[id^="deleteUnit-"]').on("click", function (e) { var id = $(this)[0].getAttribute('data-id'); swal({ title: '¿Estás seguro?', text: "No es posible deshacer esta acción!", type: "warning", showCancelButton: true, cancelButtonText: "Cancelar", confirmButtonClass: "btn btn-info btn-fill", confirmButtonText: "Si, eliminar", cancelButtonClass: "btn btn-danger btn-fill", closeOnConfirm: false, closeOnCancel: true }, function(isConfirm){ if (isConfirm){ document.getElementById(id).submit(); } }); });或overflow-y: scroll，因为主要内容的内容会有所不同，因此我不知道高度。

我希望找到一个新的CSS Grid的解决方案，但我还没有真正理解它。

注意我知道这可以通过脚本相对容易地实现，但我希望找到一个CSS解决方案。

fiddle

Answer 1

你可以这样做：

aside {
  height: 100%;
  overflow-y: scroll;
}

ul {
  height: 0;
  overflow: visible;
}

https://jsfiddle.net/4kxxsjwa/19/

CSS解决方案相等高度2列，其中较小的列获胜？

1 个答案: