将变量传递给 jQuery CSS 值以计算高度答案

【问题标题】：Pass variable into jQuery CSS value to calculate height将变量传递给 jQuery CSS 值以计算高度
【发布时间】：2016-06-08 01:07:32
【问题描述】：

我迫切需要将此 DIV“二”高度设置为 100% - （减号） 另一个 DIV 高度（div “一”）。问题是，另一个 DIV（div “one”）的高度已经是动态的了。

所以：

<body>
<div id="one"></div>
<div id="two"></div>
</body>

div { position: relative; }
body { height: 100vh; }

我尝试了类似的方法，但不起作用：

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    $('#two').css("height", "calc(100% - topHeight)")
}

或

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    var topHeightCalc = '100%' - topHeight;
    $('#two').css("height", topHeightCalc)
}

【问题讨论】：

字符串连接$('#two').css("height", "calc(100% - " + topHeight + ")")

标签： jquery css height calc

【解决方案1】：

您需要将 CSS 值中的字符串连接更正为 "calc(100% - "+ topHeight +"px)"

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    $('#two').css("height", "calc(100% - "+ topHeight +"px)")
}

div { position: relative; }
body { height: 100vh; margin:0}

#one {background:#eee}
#two {background:#666}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor lobortis aliquet. Fusce sed neque quis eros pulvinar pulvinar quis tincidunt sem. In maximus elementum sagittis. Aliquam erat volutpat. Fusce at sollicitudin dolor. Quisque diam ipsum, porta vel eros sed, pellentesque pellentesque odio. Nunc neque lorem, tincidunt eget quam in, interdum dignissim arcu. Cras dapibus felis in facilisis interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
<div id="two">asdf</div>
</body>

【讨论】：

【解决方案2】：

如果browser compatibility 不是问题的话，一个更奢侈的方法是使用display: table。这样你就可以在不使用任何JS的情况下达到你想要的效果。

body {
  height: 100vh;
}

.container__table {
  display: table;
  height: 100%;
  width: 100%;
}

.container__tr {
  display: table-row;
}

.container__td {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}

.container__td#one {
  height: 1%;
}

/* Unnecessary style */
body {
  margin: 0;
}

p {
  font-family: sans-serif;
  line-height: 1.25;
}

.container__td {
  padding: 15px;
}

#one {
  background-color: #bababa;
}

#two {
  background-color: #cdcdcd;
}

<body>
  <div class="container__table">
    <div class="container__tr">
      <div id="one" class="container__td">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto molestias excepturi accusantium quidem porro, ut doloremque qui minus dolores, vel voluptate aliquid ipsum laborum ea libero, asperiores sed. Hic nihil itaque maxime error dolorum similique quod, et, deleniti quo quas cupiditate necessitatibus eius dignissimos! Harum praesentium accusamus officia impedit quaerat voluptate minima aut dolore, quibusdam voluptas! Voluptatem similique dignissimos officiis, eligendi repellendus aspernatur, consectetur quam nemo assumenda, nihil doloribus dicta ducimus modi, atque dolorum sequi voluptate ipsam quos blanditiis. Deserunt praesentium dolorem id eius error tempora. Rem ipsam blanditiis, aliquid eos fuga facilis, perspiciatis soluta, distinctio ea sequi, explicabo dolore.<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur molestias sint saepe debitis ab aliquid eum harum eligendi, similique perferendis fuga, illum tempore, pariatur nobis tempora reprehenderit eius laboriosam. Doloribus nihil vitae at atque eaque!</p>
      </div>
    </div>
    <div class="container__tr">
      <div id="two" class="container__td">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ducimus, repudiandae excepturi velit maxime dolore. Esse quis similique fugit eligendi quae sequi numquam et unde adipisci possimus ea eius maxime eveniet, itaque voluptate recusandae magnam ducimus dolorem explicabo mollitia nisi porro asperiores ratione. Libero, sint, sapiente. Pariatur et, repellat iure!<br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni harum ullam amet nihil iusto maiores cupiditate cumque alias hic unde!</p>
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案3】：

嘿朋友，你也可以不使用 calc() 函数来实现你想要的。

这将获取窗口的高度并从中扣除 div #one 的高度并将该高度应用于 div #two。

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    var vhHeight = $(window).outerHeight(true);
    $('#two').css("height", vhHeight - topHeight + "px");
}

【讨论】：