仅限CSS - 滚动条的动态标题高度和100％内容高度

问题描述：

目标是让滚动条不被动态高度标题隐藏。仅限CSS - 滚动条的动态标题高度和100％内容高度

有很多关于CSS高度100％计算器职位;我的问题是独特的，所以如果这是一个愚蠢的借口，但我找不到答案。

所以我的web应用程序需要垂直滚动酒吧+高100％，动态标题高度。标题的高度未知，因此内容区域的高度应为100％ - 标题高度。

问题我找不出如何优雅地解决是内容垂直滚动条（尤其是底部向下滚动按钮）会隐藏，如果你做一个高度：100％，其中标题是顶部。（身高> 100％并不理想）。

<style> 
    html{ 
    height:100%; 
    } 
    body{ 
    height:100%; 
    margin:0px; 
    padding:0px; 
    overflow:hidden; 
    } 
    #header{ 
    background:blue; 
    } 
    #content{ 
    background:red; 
    overflow-y:scroll; 
    height:100%; 
    } 
</style> 

<body> 
    <div id='header'> 
    dynamic height top. (Text here could be any length.) 
    </div> 
    <div id='content'> 
    100% with no-hidden scroll-down scrollbar button. 
    </div> 
</body>

这可以通过没有JavaScript和没有HTML/CSS表吗？（我不得不使用CSS表列跨度的问题，似乎不好的做法，用于布局HTML表格）

不知道如果一个CSS/HTML大师在那里有一个答案。

http://jsbin.com/ijoqe4/ < - 在这里看到

http://jsbin.com/ijoqe4/edit <隐藏的底部滚动按钮 - 在jsbin编辑

感谢任何见解。 :)

表有什么问题？他们是有效的HTML，他们很容易解决你的问题，而不需要任何复杂的黑客。 – 2011-04-30 19:44:18

我非常困惑。你发布的exmaples似乎给你*正是*你所描述的你想要的。你能否说明你当前的尝试和期望的效果之间的差异？ – 2011-04-30 21:05:29

@Thomas，其实我也尝试过使用表格，并且它没有工作。 – 2011-05-01 13:40:14

答

有了一个动态标题，据我所知，目前还没有办法在纯CSS来做到这一点。您的问题，从这个事实，你就出现了：

想报头是动态的，因此容器必须是动态的，因此
要使容器的位置根据头部动态适应，需要一个block级别的标题，在其下面有一个block级别的容器。
有容器伸展到窗口的底部的唯一方法是设置position: absolute; top:0; bottom: 0;，与bottom参照窗口的底部。但是你需要top来指代头部的底部，而不是窗口的顶部（这是元素bottom所指的元素）。

所以，由于在纯CSS中不可能有一个关于两个不同的其他元素调整位置的元素，您必须使用JavaScript解决方案或使用表格。伤心，但是真的。

不过，即使设计表通常被视为一种禁忌，在这种情况下，这将是你最好的选择干净，它仍然是 - 技术上 - 只有HTML和CSS。

感谢Herman的解释，为了得到它，必须多读几遍......它总是最简单的东西，似乎是最令人困惑的，哈哈。我会咬紧牙关并使用JavaScript ......（我甚至无法让滚动条使用CSS表格或reg表格进行操作http://jsbin.com/ijoqe4/8/edit）JavaScript似乎是最好的选择。 – 2011-05-01 13:59:08

赫尔曼：我认为你的信息是正确的，但你的第三点（如果我正确理解你的话）并不完全 - 你可以使一个元素具有100％的高度而不使用position：absolute：'html，body，＃content {height： 100％; }'会导致#content元素为窗口高度的100％：http://jsfiddle.net/jshado1/hLbyE/需要注意的是，DOM树上的所有父元素都必须有一个明确的高度。 – jacob 2013-02-18 20:13:52

@jacob事实上，你是对的，并且做你的建议是制作粘性页脚和标题的常用解决方案。现在想想看，可能有办法做到这一点，100％的身高和负的利润率（以百分比为基础，以及？），但我不确定这种解决方案在任何情况下都是如何“动态”的，如果有效的话。值得尝试，但！ – 2013-02-19 02:30:03

答

也许尝试设置您的HTML，身高为98％而不是100％。您已禁用身体溢出，因此使用100％的div超出浏览器大小。

嗨，robx，谢谢你的回复。是的，这是一种选择......但我的强迫症不能忍受浪费那些珍贵的像素......（那些在结束底部/中心Div和视口底部）：/和人的状态栏的高度可能不同，以及顶部的动态高度... – 2011-05-01 13:48:57

仅限CSS - 滚动条的动态标题高度和100％内容高度

相关推荐