发表新帖
发表新帖

Height percentage not working in CSS

后端 未结
关注
4 2059
礼貌的吻别
礼貌的吻别 2020-11-28 15:46

I am trying to use height property using percentages, but it doesn\'t work. I want to use percentage so it looks fine in any resolution. 



        

                      

              相关标签:
4条回答
  • 南旧
    2020-11-28 16:10

    Everything outside of bloque_1 will need a height as well, or you'll get 80% of 0. You may also have to apply a height of 100% to the body.

    Here's a jsfiddle that shows it in action.

    0 讨论(0)
  • 天命终不由人
    2020-11-28 16:13

    Apply 100% height on your parent element

    HTML code- 

    <html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">   
</div>
</body>
</html>

    CSS Part-

    html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }

    Working Fiddle - http://jsfiddle.net/SEafD/1/

    0 讨论(0)
  • 孤独总比滥情好
    2020-11-28 16:19

    When you are using % for width, or height, the 1st question you should ask is that 80% of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS

    html, body {
   height: 100%;
}

    So now your div element will be 80% of 100%

    Demo

    Side Note: Also when you are dealing with absolute positioned elements, you may come across a scenario where your div won't exceed the current viewport height, so in that case you need to have min-height

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-11-28 16:32

    Demo

    html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}
    0 讨论(0)
 看不清?
提交回复
热议问题