Question

<div>
    <div class="row">
        <div class="col-md-4">
            <div class="cta-item cta-1">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Visit</p>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="cta-item cta-2">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Shop</p>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="cta-item cta-3">
                <a href="#">
                    <div class="hover"><p>Serving food fine to fast. Come <span class="arrow">Hungry</span></p></div>
                    <p class="cta-title">Eat</p>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(cta);
$(window).resize(cta);

function cta() {
    var ctaWidth = $('.cta-item').width();
    var newHeight = ctaWidth - 40;

    $('.cta-item').css( 'height', newHeight );
}
</script>

我的问题是如何通过纯css为height = width - 40px进行特定元素？

感谢。

Answer 1

如果您需要CSS在旧版浏览器中工作，还有一种方法可以利用这一事实，即垂直填充总是根据父元素的宽度计算。所以你可以这样做来强制执行高度：

// additional styles when Bootstrap css is loaded
.cta-item {
  position: relative;
  background-color: #ffcccc;
  *zoom: 1;
}

.cta-item::before {
  width: 0;
  float: left;
  display: block;
  content: ' ';
  padding-bottom: 100%; /* makes height match width */
  margin-top: -40px; /* value substracted from height */
}
// clearfix
.cta-item::after {
  content: ' ';
  display: table;
  clear: both;
}

工作示例：https://jsfiddle.net/7m5vyaqs/1/

它的作用类似于最小高度。如果您希望它是最大高度，则必须将.cta-item的内容包装到容器中并将其置于绝对位置。像：

.cta-item > *:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

Answer 2

CSS确实有一种使用纯css进行计算的实验方法。

你可以这样做：

width: calc(100% - 80px);

如果你不想计算高度，你可以这样做：

--widthA: calc(100% -80px);
width: --widthA;
height: calc(--widthA - 200px);

编辑！：我已根据宽度添加了计算高度。

如果您不想阅读更多相关内容，我建议：Mozilla Docs

将高度设置为等于宽度减去某个值

2 个答案: