html - How-to mix fixed and percentage heights/width using css without javascript -
html - How-to mix fixed and percentage heights/width using css without javascript -
i want accomplish layout this:
----------------------------------------------------------- | | | fixed height | | | |----------------------------------------------------------| | | s | | takes rest available screen height | c | | fluid height, not fixed, | r | | dependent on screen height | o | | | l | | | l | | | b | | | | | | r | ------------------------------------------------------------
using css , html, without javascript, possible? scrollbar should visible, top bottom.
see: http://jsfiddle.net/s7fh6/show/ (edit)
html:
<div id="header"></div> <div id="content"></div>
css:
html, body { margin: 0; padding: 0; overflow: hidden } #header { background: #ccc; position: absolute; left: 0; top: 0; width: 100%; height: 150px } #content { background: #eee; position: absolute; left: 0; top: 150px; bottom: 0; width: 100%; overflow-y: scroll }
html css layout
Comments
Post a Comment