如何使复选框覆盖方形容器的 100% 宽度和 100% 高度？答案

【问题标题】：How to make the checkbox to cover 100% width and 100% height of a sqaure container?如何使复选框覆盖方形容器的 100% 宽度和 100% 高度？
【发布时间】：2017-03-13 03:02:17
【问题描述】：

我已经能够在动态大小（响应式）的 div 顶部放置一个复选框，但现在我需要使复选框覆盖该 div 的 100% 宽度和 100% 高度。

这是我的密码笔：http://codepen.io/PiotrBerebecki/pen/yadEOP 目前我只是暂时硬编码了复选框的宽度和高度。

HTML：

<div id="container">
  <input type="checkbox">
  <img src="http://placekitten.com/400/400">
</div>

CSS：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  width: 50%;
  border: solid 4px tomato;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

input {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.75;
}

【问题讨论】：

标签： html css layout checkbox position

【解决方案1】：

首先您需要为复选框创建一个堆叠上下文，然后添加 100% 的宽度和高度。完成。

#container { /*create stacking context first*/ position: relative; }

input { width: 100%; height: 100%; }

完整示例：codepen

【讨论】：

【解决方案2】：

父级：

.checkboxes {
    position: relative;
}

其中的输入：

.checkboxes .checks {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    cursor: pointer;
    opacity: 0 !important;
}

这样您隐藏复选框，使其采用父级的宽度和高度，使用不透明度值隐藏它（重要 - 显示：无和可见性：隐藏不会完成这项工作）并使其可点击。瞧 :)

【讨论】：