Question

我想首先有一个文本（不是固定的高度），然后是一个div（使用openseadragon）来填充窗口中剩余的可用空间。我不想要滚动条出现。我该怎么做？

使用此代码：

＆＃13;

<html>
<head>
  <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  <meta charset="UTF-8">
</head>

<body >

<div >
  SOME TEXT HERE
</div>
  
<div id="openseadragon1" style="width: auto; height: auto; "></div>

<script src="openseadragon-bin-2.1.0/openseadragon.min.js"></script>
<script type="text/javascript">
    var viewer = OpenSeadragon({
        id: "openseadragon1",
        prefixUrl: "openseadragon-bin-2.1.0/images/",
        tileSources: "arvore/arvore.xml"
    });
</script>

</body>
</html>

＆＃13;

这就是它发生的事情：

Answer 1

假设你有一个带有文本的顶部div和另一个可以包含所有内容的div。我计算顶部div的高度，之后我计算窗口的高度，最后我做数学：(window) - (topDiv) = (height of another div)

通过使用jQuery，我们可以实现： https://jsfiddle.net/linkers/x0wo280n/1/

HTML：

<div class="text">
some text
</div>
<div class="fill">
</div>

CSS：

body{
  margin: 0;
  padding: 0;
}
.text{
  background-color: red;
}
.fill{
  background-color: green;
  width: 100%;
}

jQuery的：

$(document).ready(function(){
    var pHeight = $('.text').height();
    var windowHeight = $(window).height();
  $('.fill').height(windowHeight - pHeight);
  alert(windowHeight);
});

HTML：首先是一个文本div，然后是一个填充窗口其余部分的div（NO SCROLL）

1 个答案: