88382

Why height 100% doesn't work for the content?

Question:

In this code I have a sticky footer and a content section above, but why height:100% doesn't work for content section?

<pre class="snippet-code-css lang-css prettyprint-override">html { position: relative; min-height: 100%; } body { margin-bottom: 60px; height: 100%; } .content { background-color: #116655; height: 100%; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; background-color: #ffcc44; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="content"> <div>content</div> </div> <footer class="footer"> My footer </footer>

Answer1:

You need to set an actual height on the html

html { position: relative; height: 100%; /* not min-height */ }

<a href="https://jsfiddle.net/odfn77a7/1/" rel="nofollow"><strong>JsFiddle Demo</strong></a>

Answer2:

Use position: absolute on the content as well, then use top: 0 and bottom: 60px this will make the content take up the remaining space. then use overflow: auto; to allow scrolling the content;

(<a href="https://jsfiddle.net/humbleRumble/odfn77a7/3/" rel="nofollow">Demo</a>)

.content { position: absolute; top: 0; bottom: 60px; background-color: red; overflow: auto; }

Recommend

  • how to display content from database in codeigniter without calling controller from view?
  • Angular transclude in a directive containing a ng-template (generic Confirm Modal)
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Creating a Multi-Step Modal Using Jquery
  • Making header act like google chrome mobile app address bar
  • Enumerating Controls on a Form
  • cell spacing in div table
  • Get the number 18437736874454810627
  • Outlines on links in IE9 remains when focus is changed
  • Floated image with variable width and heading with background image
  • order post according to custom array position
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • How can I speed up CURL tasks?
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Play WS (2.2.1): post/put large request
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Change multiple background-images with jQuery
  • Avoid links criss cross / overlap in d3.js using force layout
  • Handling un-mapped Rest path
  • Paperclip, set path outside of rails root folder
  • Repeat a vertical line on every page in Report Builder / SSRS
  • What is the “return” in scheme?
  • How reduce the height of an mschart by breaking up the y-axis
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • script to move all files from one location to another location
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Memory offsets in inline assembly
  • Android Google Maps API OnLocationChanged only called once
  • apache spark aggregate function using min value
  • How to Embed XSL into XML