时间戳

首页 > 解决方案 > 调整绝对定位元素的大小

javascript - 调整绝对定位元素的大小

问题描述

元素没有调整大小，浏览器也没有重新计算元素的位置，即使所有的宽度和高度仅以百分比表示。这段代码基本上渲染了一个 Squared DIV，其中包含两个元素，一个居中，另一个位于 Square 的右上角。

        <html>
        <head>
            <style>
                .board {
                    font-size: 8em;
                }

                .cellContainerOuter {
                    width: 100%;
                    padding-bottom: 100%;
                    position: relative;
                    background-color: yellow;
                    border: 1px solid black;
                }

                .cellContainer {
                    width: 100%;
                    padding-bottom: 100%;
                    position: absolute;
                    display: table;
                }

                .cellContainerInner {
                    padding-bottom: 50%;
                    padding-top: 50%;
                    padding-left: 50%;
                    padding-right: 50%;
                    position: relative;
                    display: table-cell;
                    text-align: center;
                    vertical-align: middle;
                }

                .text {
                    border: 0px dotted white;
                    position: absolute;
                    bottom: 20%;
                    top: 20%;
                    left: 20%;
                    right: 20%;
                    overflow: hidden;
                    text-overflow: clip;

                    display: block;
                }

                .weight {
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    margin: 2px;
                    border: 1px solid white;
                }
            </style>
        </head>
        <body>
            <div class="board">
                <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
                    <div id="cell2_C_1" class="cellContainer" title="ఇ">
                        <div id="cell_C_1" class="cellContainerInner" title="ఇ">
                            <span id="weight_C_1" class="weight" title="6">6</span>
                            <span id="text_C_1" class="text" title="ఇ">ఇ&lt;/span>
                        </div>
                    </div>
                </div>
            </div>
        </body>
        </html>

非常感谢解决此问题的任何帮助。

代码笔： https ://codepen.io/mdileep/full/MGrNgw/

标签： javascripthtmlcss

解决方案

重构了你的 CSS。

让我知道这是否是您所期望的行为。或者响应式你的意思是改变你的身高6？

body {
  margin: 0;
}

.cellContainer {
  position: relative;
  background: yellow;
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  margin: 10px;
}

.cellContainerInner {
  border: 1px solid;
  height: 100%;
  display: flex;
}

.weight {
  font-size: 8em;
  position: absolute;
  right: 0px;
  top: 0px;
  border: 1px solid;
}

.text {
  flex: 1;
  font-size: 8em;
  /*   border:2px solid; */
  align-self: center;
  text-align: center;
}
<div class="board">
  <div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
    <div id="cell2_C_1" class="cellContainer" title="ఇ">
      <div id="cell_C_1" class="cellContainerInner" title="ఇ">
        <span id="weight_C_1" class="weight" title="6">6</span>
        <span id="text_C_1" class="text" title="ఇ">ఇ&lt;/span>
      </div>
    </div>
  </div>
</div>

推荐阅读