Question

我有一个div里面有两个div（一个是标题，一个是内容）。容器div的高度必须保持不变，标题div的高度包含以vw为单位设置的文本，因此文本行数将根据用户的不同而变化。屏幕，除了div的高度。我希望内容div填充容器中的剩余高度而不扩展它。我该怎么做呢？

http://jsfiddle.net/3sjrv5rz/

＆＃13;

div.container{
   height:200px;
   width:200px;
}

div.title{
    font-size:4vw;
}

div.content{
    
}

＆＃13;

<div class="container">
    <div class="title">This is my title and it may be on multiple lines with different size screens</div>
    <div class="content">
        This is my content and will contain a Google Visualization graph.
    </div>
</div>

＆＃13;

Answer 1

您可以使用overflow: scroll。

http://jsfiddle.net/x0cLa1Lu/

Answer 2

经过一番思考后，感谢来自委内瑞拉评论的Janx，我决定使用javascript解决方案。此函数用于将内容div的大小调整为剩余的任意数量的像素。我把这个附加到window.onresize并且东西正确调整大小！

function resizeTitles(){
	//1) Check the size of the titles
	//2) Check the size of the container div
	//3) Get remaining pixel height
	//4) Assign height to the flex div
	var titleHeight = document.getElementById("wind-title").clientHeight;
	var containerHeight = document.getElementById("wind-container").clientHeight;
	var remainingPixels = (containerHeight - titleHeight).toString();
	document.getElementById("wind-wrapper").style.height = remainingPixels.concat("px");
}

静态容器div中的第二个div占用动态高度标题下方的剩余高度

2 个答案: