CSS可变顶部固定底部已经帮了我

感谢您的关注，我做了一个具有菜单功能的web应用程序，其中有一个标题，说明，添加新组件的选项多个输入字段）以及底部的保存或取消按钮。标题没有换行符，并且总是具有恒定的高度，对于按钮栏来说是相同的，这些位于顶部和底部（示例中为蓝色和粉红色），描述可以具有不同数量的行，因此高度是可变的（绿色区域）。输入选项也可以有不同数量的行，但只能放在剩余的容器区域中。所以，我有什么是这样的：CSS可变顶部固定底部已经帮了我

而我想有是这样的：

凡绿地的高度是可变的，黄色的领域罢了剩下的空间有一个固定的标题和底部的按钮。 Here is the fiddle（在问题后面粘贴的代码）和一个JS函数，该函数生成1 - 5行描述（绿色字段）以模拟变化的高度。

我正在寻找一个纯粹的CSS解决方案，并花了几天的时间来研究这个问题。我尝试过CSS位置，浮动和显示命令，弹性框，表格布局等的各种组合，但不幸的是无法将我的手指放在解决方案上。我知道所描述的here JavaScript的方法是可能的，但如果我这样做，我会认为它过于复杂，可能会混淆未来的编码器工作的工具，我想提高我的知识。

由于提前，

詹姆斯

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    position: relative; 
 
    background-color: yellow; 
 
} 
 
#button { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="input"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

来源

2016-11-06 James Scott

所有你需要的是：

container元素上设置display: flex与flex-direction: column。
设置overflow-y: auto和flex: 1在flop元素上。

另外如果你想options或（黄格）始终采取的自由空间休息，即使有选项少数可以做THIS

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 1px solid black; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#flop { 
 
    overflow-y: auto; 
 
    flex: 1; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    background-color: yellow; 
 
} 
 
#button { 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="flop"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/>option 8 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

来源

2016-11-06 15:07:00

尼斯不知道弯曲可以像使用 –

内纳德 - 。谢谢在这里为你的帮助，为延迟答复道歉，这是一个实施的斗争。将添加一个答案（接受你的）与一些指针为那些f ollow。 –

对于当前的HTML，如果您打算使用br来分隔选项，那么我可以建议将#options的高度设置为等于文本的行高乘以您要显示的行数的值，即lineHeight * totalLines

为填充片段，我假设线高度为20px。所以对于4个项目，高度是20 * 4 = 80px。

var EHeader = document.getElementById("desc"); 
 
var DescLine = "desc<br/>"; 
 
var DescLines = Math.floor(Math.random() * 5) + 1; 
 

 
EHeader.innerHTML = DescLine.repeat(DescLines);

#container { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#title { 
 
    background-color: blue; 
 
} 
 
#desc { 
 
    background-color: green; 
 
} 
 
#options { 
 
    line-height: 20px; 
 
    height: 80px; 
 
    position: relative; 
 
    background-color: yellow; 
 
    overflow-y: scroll; 
 
} 
 
#button { 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0px; 
 
    background-color: pink; 
 
}

<div id="container"> 
 
    <div id="title">title</div> 
 
    <div id="desc"></div> 
 
    <div id="input"> 
 
    <div id="options">option 0 
 
     <br/>option 1 
 
     <br/>option 2 
 
     <br/>option 3 
 
     <br/>option 4 
 
     <br/>option 5 
 
     <br/>option 6 
 
     <br/>option 7 
 
     <br/> 
 
    </div> 
 
    </div> 
 
    <div id="button">button bar</div> 
 
</div>

来源

2016-11-06 15:08:16

料斗 - 感谢这里的努力，最后我跟Nenads的方法去了 –

是的，那比我的好。我也从你的问题中学到了......欢呼声 –

这里只是进一步增加了反馈，任何人试图在Chrome中实现这一点，如明确here：

这是好的，除了Chrome的所有浏览器，肚里完全对消失的内容，重叠的内容和巨大的空间（屏幕截图）不满。不知怎的，一个箱子里的花车在整个页面的其余部分都扔出了手榴弹。

为了让Chrome可以很好地播放，有必要从子标记中删除所有float: left CSS标记。该问题中给出的代码示例是一个最小的示例，实际上Flex框内的子元素更复杂。使用Nenads指针我能够得到描述的底部和菜单部分的顶部，以满足适当的扩展，但必须在可滚动区域内的子元素上使用虚拟边距（使用first-child和last-childcss标记在介绍（上）和按钮栏（如下图）创建边界的空间

问候，

詹姆斯

来源

2016-11-10 21:30:36

CSS可变顶部固定底部已经帮了我

回答

相关问题