Question

此图像中描述了该问题：

编辑：
包含div的第一个应始终可见。第二个是在主div完全填满时隐藏其余内容。

<div style="height:100%">
    <div>Dynamic ajax content</div>
    <div style="max-height:[remaining space]">Dynamic ajax content</div>
</div>

这是我目前所拥有的fiddle。

Answer 1

我认为您正在寻找类似的内容，请参阅 demo fiddle 。缩小或加宽结果窗格以查看其实际效果。

最低CSS：

#wrapper {
    overflow: hidden;
}
#upper {
    max-height: 100%;
    overflow-y: auto;
}
#downer {
    height: 100%;
}

HTML：

<div id="wrapper">
    <div id="upper"></div>
    <div id="downer"></div>
</div>

Answer 2

我不太清楚你的意思，但你可以使用百分比...... 高度：70％; 在这里解释更多http://www.w3schools.com/cssref/pr_dim_height.asp 百分比数量将根据用户屏幕高度而变化。我想这可能就是你所需要的。

Answer 3

这是2019年，我们可以利用flexbox实现这一目标。由于可以扩展灵活的内容，用户position: absolute可以固定内部内容的高度和宽度，以便支持溢出。

HTML

<div class="wrapper">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="flexi-content-wrapper">
        <div class="flexi-content">
            <!-- some long contents here -->
        </div>
    </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

这是完整的示例。如果您更喜欢stackblitz：https://stackblitz.com/edit/angular-chvhsk

或者，您可以使用代码段运行以下代码：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 90vh;
  padding: 15px;
}

.header {
  font-size: 1.5em;
  font-weight: 700;
  margin: 10px 0;

}

.content {
 margin-bottom: 10px;
}

.flexi-content-wrapper {
  margin-top: 10px;
  flex: 1;
  position: relative;
}

.flexi-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgb(253, 140, 140);
  overflow: auto;
}

.paragraph {
  padding: 20px 15px;
}

<div class="wrapper">
	<div class="header">Lorem Ipsum</div>
	<div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
		the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
		scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
		electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
		Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
		PageMaker including versions of Lorem Ipsum.</div>
	<div class="flexi-content-wrapper">
		<div class="flexi-content">
			<div class="paragraph">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu lectus eget metus faucibus luctus
				vitae et felis. Curabitur a vestibulum ex. Morbi ut tincidunt risus. Morbi luctus commodo gravida.
				Curabitur vitae rutrum nulla. Cras metus lacus, feugiat nec fermentum vel, suscipit et mauris. Ut
				consequat gravida dolor ut varius. Mauris vestibulum lorem vel egestas laoreet. Aliquam laoreet lacus
				ante, vel porttitor magna luctus quis. Nullam diam est, sodales in risus quis, fringilla venenatis nunc.
				Suspendisse eu vehicula risus, eu tempus risus. Morbi id urna consequat, malesuada ligula vitae,
				dignissim enim. Donec eros diam, feugiat et posuere a, rhoncus a eros. Aenean quis gravida purus, non
				elementum diam.
			</div>
			<div class="paragraph">
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris
				orci felis, dignissim vitae ullamcorper ac, interdum vel mauris. Suspendisse semper elit ipsum, id
				pretium mi viverra ut. Morbi fermentum eleifend metus ac dictum. Curabitur lectus quam, varius id dui
				at, imperdiet fermentum ipsum. Phasellus id eleifend felis. Etiam scelerisque porta auctor.
			</div>
			<div class="paragraph">
				Maecenas maximus purus a urna volutpat, quis congue nulla blandit. Donec ac ex massa. Vivamus euismod
				quam sit amet maximus commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan,
				enim in consequat vehicula, nunc justo finibus nibh, quis tincidunt massa eros eu risus. Nulla
				scelerisque rutrum rutrum. Suspendisse venenatis, dolor eu finibus maximus, arcu massa varius velit,
				eget maximus lacus ex ut tellus. Cras a tortor iaculis, volutpat risus quis, congue lectus. Curabitur id
				mi in massa rutrum luctus. Donec ornare dolor ut massa congue, ac pretium lacus viverra. Morbi vulputate
				sapien et nibh pharetra cursus. Phasellus ac lobortis orci, eu laoreet tortor. Cras ac purus ligula. Sed
				in cursus ipsum. Etiam interdum neque vitae euismod facilisis.
			</div>
			<div class="paragraph">
				Integer placerat feugiat metus, a egestas mi porta lacinia. Nam interdum pretium ligula feugiat
				elementum. Phasellus quis urna tincidunt, rhoncus ligula et, commodo tortor. Pellentesque tristique
				ipsum eu odio sodales finibus. Vestibulum ut enim malesuada, ullamcorper est pretium, pulvinar elit. Ut
				gravida luctus elit. Ut vehicula sodales convallis. Mauris at velit eget nisi tincidunt tempus. Aenean
				non est scelerisque nunc porta volutpat. Nam urna justo, fermentum vitae neque et, tristique porttitor
				ipsum. Praesent orci quam, fermentum id ultricies id, varius et lorem. Vivamus quis viverra eros, vitae
				rutrum sapien.
			</div>
			<div class="paragraph">
				Sed odio leo, imperdiet vitae feugiat et, volutpat id massa. Proin gravida feugiat vehicula. Nulla
				lobortis risus nec cursus congue. Praesent euismod fringilla ante, aliquam semper arcu malesuada sed.
				Nulla ac nisl velit. Aliquam porta dui sit amet arcu tempor vehicula. Integer tincidunt nisl vitae diam
				venenatis dictum. Integer ut placerat leo. Ut eu ultrices magna. Nam eget leo gravida, semper urna
				mollis, bibendum ante. Proin accumsan massa nec hendrerit gravida. Suspendisse interdum ipsum in justo
				ullamcorper, eu hendrerit turpis iaculis. Nunc id rhoncus urna. Integer elementum nibh ut turpis gravida
				accumsan. Quisque vulputate imperdiet ligula sed imperdiet. Nullam auctor ante nunc, vel pretium tortor
				tempor quis.
			</div>
			<div class="paragraph">
				Morbi id tellus vehicula, dapibus ante eget, malesuada arcu. Vivamus aliquam vitae sem eu tincidunt.
				Nullam laoreet consequat congue. Pellentesque id vestibulum metus. Nullam elementum tincidunt dignissim.
				Mauris et erat id ipsum elementum ullamcorper eget non metus. Phasellus elementum lorem non lacinia
				pretium. Fusce vel placerat sapien. Sed condimentum bibendum lectus at rhoncus. Phasellus eu auctor
				velit.
			</div>
		</div>
	</div>
</div>

Answer 4

我只能根据您的帖子和小提琴猜测您要使用CSS calc() （在这种情况下，使用JavaScript样式）：

//<![CDATA[
/* js/external.js */
var doc, html, bod, nav, mobile, M, I, S, Q, special, unspecial; // for use on other loads
addEventListener('load', function(){
doc = document; html = doc.documentElement; bod = doc.body;  nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
  return doc.createElement(tag);
}
I = function(id){
  return doc.getElementById(id);
}
S = function(selector, within){
  var w = within || doc;
  return w.querySelector(selector);
}
Q = function(selector, within){
  var w = within || doc;
  return w.querySelectorAll(selector);
}
special = function(str){
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
var testText = special("This is just a bunch of text to show you if it works. You can see why characters like < and > should be escaped in HTML & .innerHTML, but not in .value. You'll want to use Element.getBoundingClientRect() if the height is dynamic.");
var pageTop = I('page_top'), fd = I('first_dynamic'), dyn = I('dynamic'), dynS = dyn.style;
I('test_button').onclick = function(){
  if(fd.innerHTML === ''){
    fd.innerHTML = testText;
  }
  else{
    dyn.innerHTML += testText;
    dynS.height = 'calc(100% - '+pageTop.getBoundingClientRect().height+'px)';
  }
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  height:100%; overflow:hidden; padding:0; 
}
h1{
  text-align:center; padding:3px 0;
}
input{
  width:100%; font-size:28px;
}

#first_dynamic,#dynamic{
  overflow-y:scroll;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='page_top'>
    <h1>TOP OF PAGE HERE</h1>
    <input id='test_button' type='button' value='Click to Test' />
    <div id='first_dynamic'></div>
  </div>
  <div id='dynamic'>
  </div>
</body>
</html>

您应该知道Element.getBoudingClientRect()不计算边距。您还应该知道，如果您的#first_dynamic太大，则会遇到问题。

Answer 5

这是您想要的吗？尝试将#main :first-child的内容替换为非常长的lorsum ipsum，以查看第一个孩子变得太长时的行为

#main{
    height: 300px;
    border: 1px solid;
    display: grid;
    grid-template-rows: minmax(50%, auto) 1fr;
    overflow-y: hidden;
}
#main :last-child{
    border: 1px solid red;
    overflow-y: auto;
}

<div id=main>
    <div>Dynamic ajax cLor</div>
    <div>Dynamic ajax content<br>Dynamic ajax content</div>
</div>

Answer 6

解决方案：

HTML

<div id="outer">
    <div id="inner_fixed">
        I have a fixed height
    </div>

    <div id="inner_remaining">
        I take up the remaining height
    </div>
</div>

CSS

#outer {
   display: flex;
   flex-flow: column;
   height: 100%;
}
 
#inner_fixed {
   height: 100px;
   background-color: grey;
}
 
#inner_remaining {
   background-color: #DDDDDD;
   flex-grow : 1;
}

本文提供了其他解决方案：https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

CSS：max-height：剩余空间

6 个答案: