Html – CSS Only – Dynamic Header Height & 100% Content Height with Scrollbars – iTecNote |
您所在的位置：网站首页 › webkit-scrollbar-button › Html – CSS Only – Dynamic Header Height & 100% Content Height with Scrollbars – iTecNote |
|
The goal is for the scrollbar not to be hidden with a dynamic height header. There's a lot of posts on stackoverflow about CSS height 100%; My problem is kind of unique, so excuse if it's a dupe, but I couldn't find an answer. So my web-app needs vertical scroll-bars + height 100%, and dynamic header height. Header has an unknown height, so the height of the content area should be 100%-header height. The problem I couldn't figure out how to solve elegantly was that the Content vertical scroll-bars (especially bottom scroll-down button) would get hidden if you do a height:100% on it, with the header being up top. (height >100% is not ideal). html{ height:100%; } body{ height:100%; margin:0px; padding:0px; overflow:hidden; } #header{ background:blue; } #content{ background:red; overflow-y:scroll; height:100%; } dynamic height top. (Text here could be any length.) 100% with no-hidden scroll-down scrollbar button.Could this be done with No JavaScript and No HTML/CSS Tables? (I had colspan issues using css tables, and it seems bad practice to use html tables for layout) Wonder if a CSS/HTML guru out there has an answer. http://jsbin.com/ijoqe4/ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |