0

I have a code

<html>
  <head></head>
  <body>
   <div id="main"> Hello world.!</div>
  </body>
</html>

and CSS

body{
  background-color: black;
}

#main{
  padding: 10px;
  background-color: blue;
}

please help me out to have a background with 100% height. looking for jsfiddle link.

RealDeepak
  • 823
  • 6
  • 9
Nandish Majjagi
  • 11
  • 5

4 Answers4

0

as i have understood if you want to set the height of blue div then add this

body {
  background-color: black;
}
body,
html {
  height: 100%;
}
#main {
  min-height: 100%; /** set height 100% if content is smaller **/
  height: auto; /** if the content is larger than **/
}
#main {
  padding: 10px;
  background-color: blue;
}
<div id="main">Hello world.!
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
  • This code is not dynamic and fails when the content is higher than the window height. http://jsfiddle.net/tk6hvzs4/ – Christian Jan 09 '15 at 06:42
0
.center-element {
    min-height: 100%;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
}
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142
0

In CSS3 you can use vh wich stands for viewport height. i.e. 100 vh means 100% of viewport height.

height: 100vh;

trevligheten
  • 306
  • 2
  • 13
0

I would definitely recommend you to look at this post: Make div 100% height of browser window

Here it is explained not just how to do it, but also the difference between 100% and 100vh.

Really good for extra knowledge :-)

Community
  • 1
  • 1
Patrick R
  • 1,949
  • 3
  • 32
  • 58