How to set Bootstrap's hero unit height to 100%?


Tags: css,twitter-bootstrap

Problem :

I am doing a very simple landing page using Bootstrap. The idea is to have a hero unit text element covering the entire page regardless of the window size. The width: 100%; CSS instruction works great, but height: 100%; has no effect – the hero unit element is still about 200px high and is attached to the top of the window. How do I set hero unit's height to 100%? Thanks in advance.



Solution :

You have to set the height:100% on html and body tags, and if the hero div has a parent, it'll need that as well.

Example http://jsfiddle.net/xExSE/


    CSS Howto..

    how to fadein an inline element as a block element

    How to echo CSS class only once in first iteration foreach in PHP?

    CSS: How to increase distance between two elements?

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    How to dynamically insert css vendor prefixes using jquery

    How to keep nav bar from shifting elements to next line when zooming in?

    css: how to position a X sign at the top right corner of the img element

    how to set individual scroll for content and left menu

    how to make div fixed at a particular scroll level

    Css code how to create multiple div classes

    Only Lower Half Of The Border Is Shown

    How to fit images into keeping the exact size of

    How to select element by order ? - Css

    disabling stylesheets to increase the speed of showing/hiding divs

    How to apply css and elemental styles to a ASP.net MVC 3 Web Application

    How to make an element slide with the viewport as it scrolls?

    How do I get started with jQuery? [closed]

    How to make div layer unselectable in jquery and css

    How to give fadein effect to a div tag using CSS

    How to fix angular-strap css

    HTML / CSS: How to make the content follow the footer?

    How to do a 'soft' release of features/refactoring in CSS?

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How to use CSS to center the buttons?

    How to fit label “css width”

    How to show the text overflow after showing two lines in the div using css?

    How to keep the Parent menu hovered while the mouse in child menu in a Dropdown Menu

    How to put a border on a triangle shape using css?

    How to do mobile devices-friendly CSS for both desktop and mobile devices

    How to parse the default css property to inline style attribute