Javascript 在Vue js中设置div的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51692031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set height of a div in vue js
提问by mr. Done
I am using vue js . I want to set one div based on another div height, with pure javascript. the problem I am facing is I can't set the height using pure java script. but I can set it using jquery. can any one please help me to change this jquery to javascript . the code I am using is given
我正在使用 vue js 。我想使用纯 javascript 根据另一个 div 高度设置一个 div。我面临的问题是我无法使用纯 Java 脚本设置高度。但我可以使用 jquery 设置它。任何人都可以帮我将此 jquery 更改为 javascript 。给出了我正在使用的代码
Vue.nextTick(function () {
var offsetHeight = document.getElementById('filterSection').offsetHeight;
$(".searchResultSection").css("max-height",`calc(100% - ${offsetHeight}px)`);
});
I need to change the jquery part into java script.
我需要将 jquery 部分更改为 java 脚本。
回答by sadiqevani
Not sure about the context of this change, but I'll try to give you some solutions based on best practices on how to achieve that:
不确定此更改的上下文，但我会尝试根据有关如何实现此更改的最佳实践为您提供一些解决方案：
If parent element has a fixed height, then children with
height: 100%will adopt parents height..parent { height: 200px; }
.child { height: 100%; }
Use a vue-directive for DOM manipulation: https://vuejs.org/v2/guide/custom-directive.html
Use v-bind:style="height:
calc(100% - ${offsetHeight}px)\" on the element that you want to achieve the height!
如果父元素具有固定的高度，则子元素
height: 100%将采用父元素的高度。.parent { 高度：200px; }
.child { 高度：100%；}
使用 vue-directive 进行 DOM 操作：https: //vuejs.org/v2/guide/custom-directive.html
calc(100% - ${offsetHeight}px)\在要达到高度的元素上使用 v-bind:style="height: " ！
回答by Thomas Brd
In fact, computed properties(https://vuejs.org/v2/guide/computed.html#Computed-Properties) is the perfect option to solves your problem:
事实上，computed properties（https://vuejs.org/v2/guide/computed.html#Computed-Properties）是解决您问题的完美选择：
Declare a computed propertywho will return the filterSectionHeight
声明一个将返回 filterSectionHeight的计算属性
export default {
name: "App",
computed: {
filterSectionHeight() {
const filterSectionDOM = document.getElementById("filterSection");
return filterSectionDOM ? filterSectionDOM.offsetHeight : 0;
},
}
};
Define your div filterSectionand searchResultsSectionin your component (or App component), don't forget to add a :styleattributewho handle the dynamic max-heightprovided to .searchResultsSectionin your template
定义您的 divfilterSection并searchResultsSection在您的组件（或 App 组件）中，不要忘记添加一个:style处理模板中max-height提供的动态的属性.searchResultsSection
<div id="filterSection"></div>
<div class="searchResultsSection"
:style="{
'max-height': `calc(100% - ${filterSectionHeight}px)`
}">
</div>
Set height of each div to 100%in your css
在 css 中将每个 div 的高度设置为 100%
#app {
height: 600px;
width: 100%;
}
#filterSection {
height: 100%;
background: rebeccapurple; //https://en.wikipedia.org/wiki/Eric_A._Meyer
}
.searchResultsSection{
height: 100%;
background: rebeccapurple;
opacity: 0.6;
}
You will find a full demo here > https://codesandbox.io/s/1rkmwo1wq
您将在此处找到完整的演示 > https://codesandbox.io/s/1rkmwo1wq
回答by Nuwan Alawatta
You need to use the javascript DOM-style to do this. Try this.
您需要使用 javascript DOM 样式来执行此操作。尝试这个。
Vue.nextTick(function () {
var offsetHeight = document.getElementById('filterSection').offsetHeight;
var x = document.getElementsByClassName("searchResultSection");
x[0].style.maxHeight = "calc(100% - ${offsetHeight}px)";
});
