Home/ Questions/Q 7053229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:28:47+00:00

Simple html height problem, i basicaly just want to set the height of the

  • 0

Simple html height problem, i basicaly just want to set the height of the 3 buttons to 25% of the body height, works fine for the width attribute, but not for some reason the heigth doesn’t

div.mainMenuButton {

height:25%;  
text-align:center;

width:100%;
background:green;

}

<body>
    <div id="menuContainer">
        <div id = "playButton" class = "mainMenuButton" onClick="loadGame()">
            Play
        </button>   
        </div>
        <div id = "optionsButton" class = "mainMenuButton">
            Options
        </div>
        <div id = "aboutButton" class = "mainMenuButton">
            About
        </div>

    </div>

</body>

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the CSS:

    CSS

    .mainMenuButton {
    height:25%;  
    text-align:center;
    width:100%;
    background:green;   
}

#menuContainer {
    height: 100%;
}

html,body {
    margin:0;
    padding:0;
    height:100%;
}

    And the HTML:

    HTML

    <div id="menuContainer">
    <div id = "playButton" class = "mainMenuButton" onClick="loadGame()">
        Play  
    </div>
    <div id = "optionsButton" class = "mainMenuButton">
        Options
    </div>
    <div id = "aboutButton" class = "mainMenuButton">
        About
    </div>

</div>

    And the fiddle: http://jsfiddle.net/QPYML/

    • 0