Pass variable into jQuery CSS value to calculate h

I desprately need to set this DIV "two" height to be calculated as 100% - (minus) another DIV height (div "one"). The thing is, the height of that another DIV (div "one") is dynamic already.

So:

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

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

I tried things like these, but that doesn't work:

$(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)
}

标签： jquery css height calc

3条回答

贼婆χ

2楼-- · 2019-06-09 07:39

You need to correct string concatenation in the CSS value to "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>

0人赞添加讨论(0) 举报

在下西门庆

3楼-- · 2019-06-09 07:47

Hey friend you can also achieve what you want without using the calc() function.

This gets height of the window and deduct height of the div #one from that and apply that height to 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");
}

0人赞添加讨论(0) 举报

虎瘦雄心在

4楼-- · 2019-06-09 07:48

A more extravagant way of doing this, if browser compatibility is not an issue, is to use display: table. This way you can achieve your desired effect without using any 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>

0人赞添加讨论(0) 举报

Pass variable into jQuery CSS value to calculate h

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间