我的页面上有一个标题。它的内容可以换行，所以它不是固定高度。页面的其余部分应由内容容器填充。当容器中的内容过多时，它应该激活垂直滚动。我尝试了很多可能性，但总是陷入死胡同（位置：绝对或显示：表格）。现在我回到起点:(
这是我工作的起点。绿色容器是我的页面。我使用 JqueryUI 使其可重新调整大小，但我正在寻找非 JS 解决方案。
感谢您的时间并希望您的帮助。
问问题
1176 次
10 回答
5
这有效：
.page {
background-color: #8f8;
width: 80%;
height: auto;
}
.header {
background-color: #fcc;
}
.content {
background-color: #ccf;
overflow: auto;
height: inherit;
}
于 2013-05-16T02:12:44.193 回答
2
我认为可以这样解决：
.page {
background-color: #8f8;
min-height: 100%;
width: 80%;
}
.header {
background-color: #fdc;
overflow: hidden;
}
.content {
background-color: #ccf;
overflow-y: auto;
height: 100%;
width: 100%;
/*word-wrap: break-word;*/
}
好的，我做了什么：
- 页面：如果你真的知道高度的大小，你可以简单地将高度设置为 200px，但对我来说添加
min-height: 100%使页面填满所有空间更有意义。 - 标头：要在内容更改时允许标头调整大小，必须将其溢出设置为隐藏。这将避免显示任何类型的滚动。当然它必须是一个块元素，比如 div 或者你必须添加
display:block. - 内容：这里把高度设置为100%的空间，只有在需要的时候才允许垂直滚动的可见性，只有当你要显示的内容可以使水平滚动出现时才断词。
最后，为了避免页面脱离底部，将标题作为内容 div 的一部分。向我询问更多详情。
更新：这是我测试过的例子。
UPDATE2 我得到的最好的是：
.page {
background-color: #ccf;
max-height: 100%;
width: 80%;
overflow: hidden;
}
.header {
background-color: #fdc;
overflow: hidden;
}
.content{
overflow-y: auto;
height: 100%;
word-wrap: break-word;
}
它唯一的问题是滚动认为它正在滚动的是所有“页面”元素而不仅仅是内容，所以你看不到滚动的最终箭头。我认为这可以通过使用 javascript 来解决，但是使用 css 我认为没有更好的解决方案。
Javascript可能的解决方案：
$(window).resize(function() {
resizeContent();
});
$(document).load(function(){
resizeContent();
});
function resizeContent(){
$('.content').height($(".page").height()-$('.header').height());
}
最终解决方案的链接可以在这里找到
于 2013-05-14T22:51:19.320 回答
2
编辑：即使很多答案都很接近，我仍然this behavior cannot be achieved only using CSS and NOT having a styling issue会陈述并解释原因。
问题：
- 让标题自由包装它的内容，导致它的高度发生变化。
- 使可滚动区域可调整大小并需要填充它的所有包装。
解决方案：
- 许多答案都接近实现这一目标：
最后：
- JNDPNT 的回答在这里丢了一些光：
I don't think what you want is possible in css... You should look into a JS solution I'm afraid. - 请不要在css中操之过急，很多东西都不是看起来的样子，css也必须经过测试，每次在css中调整大小都不是你的朋友。在重新调整窗口或容器的大小、拖放等时，许多样式可能会中断。
- 即使在高度响应的设计中，他们中的许多人也有 css hack，和/或至少有一些基本的 javascript 和/或 jquery 使用。
注意：老实说，我想帮助 OP，我很确定这不能用纯 CSS 实现。
我认为不使用任何 javascript 是不可能的，这是我为满足您的要求而制作的 jsbin，请看一下：http: //jsbin.com/acirez/1。
这是结果：
注意：考虑将.page和.header类改为 id，因为 javascript 会：
$('div.content').height($('.page').height() - $('.header').height());
如果您不希望出现水平条，只需更改overflow: scroll;for overflow-y: scroll;。
希望能帮助到你！
编辑：添加图像。
于 2013-05-17T01:19:53.407 回答
1
我不知道您是否可以移动 DOM，但如果可以，我建议您将标题放在内容页面中。这不是最自负的方式，但它是我在没有 JS 的情况下得到的唯一想法。
所以，把你的标题放在内容中，然后设置内容min-height为 100%。内容将始终填充其父级，如果文本比容器长，则会出现滚动条。
请注意，由于可调整大小，滚动条始终存在。在您的上下文中，它不会存在。
于 2013-05-11T17:16:14.457 回答
1
只需将内容设为其父级的 100% 高度即可。
.content {height: 100%;}
于 2013-05-10T11:27:27.203 回答
1
我不认为你想要的在 css 中是可能的......你应该研究一个 JS 解决方案，我害怕。
我已经用表格属性进行了测试，并且让标题变得灵活很容易。让内容填满其余内容也很容易......但是当文本变长时，我无法让剩余的内容滚动。我找不到解决方案，坦率地说，我认为不存在。证明我错了......为此找到一个纯css解决方案会很有趣:)。
这是据我所知：
于 2013-05-10T11:20:19.110 回答
1
为 div.content 赋予 overflow-y: scroll 属性，以及超过 div.page 的高度。我刚刚让它高度：100%。然后隐藏div.page上的溢出。
.page {
background-color: #8f8;
height: 200px;
width: 80%;
overflow: hidden;
}
.header {
background-color: #fcc;
}
.content {
background-color: #ccf;
overflow-y: scroll;
height: 100%
}
现在如果盒子真的被打包的话，这将切断最后一点溢出，但这是我能想到的唯一解决方案，而不使用一些js来动态调整div.content的大小。
于 2013-05-14T13:58:53.670 回答
1
一个简单的解决方案是将以下内容添加到您的#content：
height:100px;
overflow-y: scroll;
这给了它一个高度，他留下了一个高度。使overflow-y:scroll;内容在 100px 后可滚动；
如果你想要更多，你可以给它一个最小和最大高度，如下所示：
min-height:100px;
max-height:600px;
overflow-y: scroll;
在这种情况下，它会一直填充它直到高度达到 600px，然后会进入overflow-y:scroll;
//更新//
将内容和标题的位置放在relative并应用于height:auto; padding-bottom:50px;#page
于 2013-05-07T14:21:04.717 回答
1
于 2013-05-10T11:48:18.800 回答
0
好的，所以我不太确定您到底想要什么，但这是一个尝试。
http://jsbin.com/asazaq/1/edit
如果您不将标题的高度设置为固定值，现在没有非 JavaScript 方法可以让标题和内容填充所有可用空间。
这是第二个使用 Css3 的 Calc 函数。
http://jsbin.com/asazaq/2/edit
也许这更符合您的喜好，但旧浏览器不支持它
于 2013-05-17T08:23:01.187 回答