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
  • 793
  • 5
  • 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,429
  • 2
  • 19
  • 37
  • 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,480
  • 14
  • 60
  • 115
0

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

height: 100vh;

trevligheten
  • 286
  • 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
  • 31
  • 57